webentwicklung-frage-antwort-db.com.de

Objekt beim Scrollen oben auf das Browserfenster fixieren

Ich habe kürzlich ein neues interessantes Feature in der neuen Google Mail und auch in der HTML5-Vorschau von bing gesehen, die beim Scrollen eine Navigationsleiste am oberen Rand des Browserfensters fixiert. Die Leiste beginnt möglicherweise 100 Pixel nach unten, aber wenn Sie einen Bildlauf durchführen und den oberen Rand des Browser-Fensters erreichen, wird sie dort fixiert, bis Sie wieder über dem ursprünglichen Bildlauf nach oben scrollen.

Meine Frage ist; Wie kann ich diesen Effekt machen oder etwas Ähnliches tun?

Ich hoffe, Sie können meine Frage verstehen und was ich zu beschreiben versuche.

22
Cosmo Posmo

Wenn Sie möchten, dass das Element weiter unten auf der Seite beginnt, bleiben Sie beim Scrollen nach unten fixiert. Dies kann ein guter Anfang sein:

http://jsfiddle.net/cc48t/

21
g_thom

Ich weiß, dass dieser Beitrag ein bisschen alt ist, aber immer noch sehr nützlich. Ich wollte nur eine Jquery-Version hinzufügen (etwas sauberer und konfigurierbar), aber es ist eine modifizierte Version der Antwort von Andrew D.

In diesem Fall habe ich keine zwei Klassen, stattdessen habe ich ein relativ positioniertes div und wenn ich einen bestimmten Punkt (max_scroll) erreicht habe, füge ich dem Objekt eine Klasse hinzu, und diese Klasse macht es schwebend

Unten ist das Javascript (alles innerhalb der Funktion "Dokument bereit").

<script type="text/javascript">
var max_scroll = 400; // this is the scroll position to start positioning the nav in a fixed way
$(document).ready(function(){

        $(window).scroll(function () {
        var navbar = $(".filterbutton");

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop > max_scroll && !navbar.is(".filterbuttonFixed")) {
                navbar.addClass("filterbuttonFixed");
                // console.log("go floated");
        }
        else if(scrollTop < max_scroll && navbar.is(".filterbuttonFixed") ) {
                // console.log("return to normal");
                navbar.removeClass("filterbuttonFixed");
        }

}
});

</script>

und das ist mein nav-bar container div

<div id="floatable-nav-bar" class="my-relative-position-class">
    <nav class="page-menu">
        <ul class="scroll-nav">
            <li><a class="selected" href="#first">Section 1</a></li>
            <li><a class="" href="#second">Section 2</a></li>
            <li><a class="" href="#third">Section 3</a></li>
            <li><a class="" href="#fourth">Section 4</a></li>
        </ul>
    </nav>
</div>

und nicht zuletzt mein nav-floated-style

#floatable-nav-bar.nav_floated {
    position:fixed;
    top:1px;
    left: 0;
    width:100%;
    text-align: center;
    background: #EEE;
    padding: 5px 0;
}

Ich weiß, dass dies nicht das einfachste Beispiel ist, aber für jQuery-Benutzer ist dies möglicherweise ein einfacherer Ansatz. Ich denke, es ist besser, nur eine Klasse hinzuzufügen und zu entfernen (zumindest war es für mich).

18
polloss

Wenn der Browser "position: fixed" unterstützt, ist das nächste einfache Javascript-Beispiel schneller:

<html>
<head>
<style>
html,body {
  margin: 0;
}
#navbar.navbar_fixed {
  position:fixed;
  top:0px;
  width:100%;
  height:100px;
  background-color:#f00;
}
#navbar.navbar_absolute {
  position:absolute;
  top:100px;
  width:100%;
  height:100px;
  background-color:#f00;
}
</style>
<script type="text/javascript">

function window_onload() {
  window.addEventListener("scroll",navbar_reset_top,false);
}

var navbar_top=100;

function navbar_reset_top() {
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  if(scrollTop>navbar_top&&navbar.className==="navbar_absolute") {
    document.getElementById("navbar").className="navbar_fixed";
  }
  else if(scrollTop<navbar_top&&navbar.className==="navbar_fixed") {
    document.getElementById("navbar").className="navbar_absolute";
  }
}

</script>
</head>
<body onload="javascript:window_onload();">
<div id="navbar" class="navbar_absolute">Navigation Bar</div>
<div style="height:2000px;background-color:#ff0;">Content</div>
</body>
</html>
9
Andrew D.

Benutzen:

#element {
  position: fixed;
  right: 200px;
  top: 200px;
}

"Fixed" bedeutet, dass das Element relativ zum Browserfenster positioniert ist.

5
Fasani

Indem Sie die Position des div auf position:fixed setzen

1
Ahsan Rathod

Du kannst es so machen:

Beispiel

css

body {
    height: 3000px;
    top: 0;

}
#image {
    width: 100%;
    background: #444;
    height: 50px;
}
#scroller{
    height:100px;
    background:#ccc;
}
.stuck{
    position:fixed;
    z-index:100;
    width:100%;
    top:0;
}

skript

$(window).scroll(function() {
                if ($(window).scrollTop() > 50) {
                    $('#scroller').addClass('stuck');
                } else {
                    $('#scroller').removeClass('stuck');
                }

            });

nach dem Scrollen von 50 px wird der CSS-Scroller geändert.

dies kann ein guter Anfang sein

0
Nileshd

Anstatt die Bildlauflänge zu definieren, warum können wir die Position des Objekts nicht definieren? sagen, sobald es oben ist: 0, dann lösen Sie das Skript aus. Auf diese Weise wird es gerätefreundlicher.

0
Kunal Sarin