Wie kann ich ein Div am oberen Bildschirmrand festhalten, nachdem es gescrollt wurde?

Ich möchte ein div erstellen, das sich unter einem Inhaltsblock befindet, aber sobald die Seite so weit gescrollt wurde, dass sie ihre obere Grenze berührt, fixiert wird und mit der Seite scrollt.

Sie können einfach CSS verwenden und Ihr Element als fest positionieren :

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

Bearbeiten: Sie sollten das Element mit der absoluten Position haben. Sobald der Bildlaufversatz das Element erreicht hat, sollte es auf fest geändert und die obere Position auf Null gesetzt werden.

Sie können den oberen Bildlaufversatz des Dokuments mit der Funktion scrollTop ermitteln :

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

Wenn die Scroll - Offset 200 erreicht, wird das Element haften an den oberen Rand des Browserfensters, weil , wie festgelegt angeordnet ist.

Sie haben dieses Beispiel auf der Ausgabeseite von Google Code und (erst kürzlich) auf der Bearbeitungsseite von Stack Overflow gesehen.

Die Antwort von CMS setzt die Positionierung nicht zurück, wenn Sie zurück scrollen. Hier ist der schamlos gestohlene Code von Stack Overflow:

function moveScroller() {
    var $anchor = $("#scroller-anchor");
    var $scroller = $('#scroller');

    var move = function() {
        var st = $(window).scrollTop();
        var ot = $anchor.offset().top;
        if(st > ot) {
            $scroller.css({
                position: "fixed",
                top: "0px"
            });
        } else {
            $scroller.css({
                position: "relative",
                top: ""
            });
        }
    };
    $(window).scroll(move);
    move();
}

<div id="sidebar" style="width:270px;"> 
  <div id="scroller-anchor"></div> 
  <div id="scroller" style="margin-top:10px; width:270px"> 
    Scroller Scroller Scroller
  </div>
</div>

<script type="text/javascript"> 
  $(function() {
    moveScroller();
  });
</script> 

Und eine einfache Live-Demo .

Eine aufkommende, skriptfreie Alternative ist die position: sticky, die in Chrome, Firefox und Safari unterstützt wird. Weitere Informationen finden Sie im Artikel zu HTML5Rocks und Demo sowie in Mozilla-Dokumenten .

Ab Januar 2017 und der Veröffentlichung von Chrome 56 unterstützen die meisten gängigen Browser die position: stickyEigenschaft in CSS.

#thing_to_stick {
  position: sticky;
  top: 0px;
}

macht den Trick für mich in Firefox und Chrome.

In Safari müssen Sie noch verwenden position: -webkit-sticky.

Polyfills sind für Internet Explorer und Edge verfügbar. https://github.com/wilddeer/stickyfill scheint gut zu sein.

Ich hatte das gleiche Problem wie Sie und habe am Ende ein jQuery-Plugin erstellt, um mich darum zu kümmern. Es löst tatsächlich alle Probleme, die hier aufgelistet sind, und fügt einige optionale Funktionen hinzu.

Optionen

stickyPanelSettings = {
    // Use this to set the top margin of the detached panel.
    topPadding: 0,

    // This class is applied when the panel detaches.
    afterDetachCSSClass: "",

    // When set to true the space where the panel was is kept open.
    savePanelSpace: false,

    // Event fires when panel is detached
    // function(detachedPanel, panelSpacer){....}
    onDetached: null,

    // Event fires when panel is reattached
    // function(detachedPanel){....}
    onReAttached: null,

    // Set this using any valid jquery selector to 
    // set the parent of the sticky panel.
    // If set to null then the window object will be used.
    parentSelector: null
};

https://github.com/donnyv/sticky-panel

Demo: http://htmlpreview.github.io/?https://github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm

Und so geht's ohne jquery (UPDATE: siehe andere Antworten, wo Sie dies jetzt nur mit CSS tun können)

var startProductBarPos=-1;
window.onscroll=function(){
  var bar = document.getElementById('nav');
  if(startProductBarPos<0)startProductBarPos=findPosY(bar);

  if(pageYOffset>startProductBarPos){
    bar.style.position='fixed';
    bar.style.top=0;
  }else{
    bar.style.position='relative';
  }

};

function findPosY(obj) {
  var curtop = 0;
  if (typeof (obj.offsetParent) != 'undefined' && obj.offsetParent) {
    while (obj.offsetParent) {
      curtop += obj.offsetTop;
      obj = obj.offsetParent;
    }
    curtop += obj.offsetTop;
  }
  else if (obj.y)
    curtop += obj.y;
  return curtop;
}

* {margin:0;padding:0;}
.nav {
  border: 1px red dashed;
  background: #00ffff;
  text-align:center;
  padding: 21px 0;

  margin: 0 auto;
  z-index:10; 
  width:100%;
  left:0;
  right:0;
}

.header {
  text-align:center;
  padding: 65px 0;
  border: 1px red dashed;
}

.content {
  padding: 500px 0;
  text-align:center;
  border: 1px red dashed;
}
.footer {
  padding: 100px 0;
  text-align:center;
  background: #777;
  border: 1px red dashed;
}

<header class="header">This is a Header</header>
<div id="nav" class="nav">Main Navigation</div>
<div class="content">Hello World!</div>
<footer class="footer">This is a Footer</footer>

So habe ich es mit jquery gemacht. Dies alles wurde aus verschiedenen Antworten zum Stapelüberlauf zusammengeschustert. Diese Lösung speichert die Selektoren zwischen, um eine schnellere Leistung zu erzielen, und löst auch das "Springen" -Problem, wenn das klebrige Div klebrig wird.

Überprüfen Sie es auf jsfiddle: http://jsfiddle.net/HQS8s/

CSS:

.stick {
    position: fixed;
    top: 0;
}

JS:

$(document).ready(function() {
    // Cache selectors for faster performance.
    var $window = $(window),
        $mainMenuBar = $('#mainMenuBar'),
        $mainMenuBarAnchor = $('#mainMenuBarAnchor');

    // Run this on scroll events.
    $window.scroll(function() {
        var window_top = $window.scrollTop();
        var div_top = $mainMenuBarAnchor.offset().top;
        if (window_top > div_top) {
            // Make the div sticky.
            $mainMenuBar.addClass('stick');
            $mainMenuBarAnchor.height($mainMenuBar.height());
        }
        else {
            // Unstick the div.
            $mainMenuBar.removeClass('stick');
            $mainMenuBarAnchor.height(0);
        }
    });
});

Hier ist eine weitere Option:

JAVASCRIPT

var initTopPosition= $('#myElementToStick').offset().top;   
$(window).scroll(function(){
    if($(window).scrollTop() > initTopPosition)
        $('#myElementToStick').css({'position':'fixed','top':'0px'});
    else
        $('#myElementToStick').css({'position':'absolute','top':initTopPosition+'px'});
});

Sie #myElementToSticksollten mit der position:absoluteCSS-Eigenschaft beginnen.

Wie Josh Lee und Colin 't Hart gesagt haben, können Sie optional auch einfach position: sticky; top: 0;auf die Div anwenden, bei der Sie scrollen möchten ...

Außerdem müssen Sie dies nur oben auf Ihrer Seite kopieren oder so formatieren, dass es in ein externes CSS-Blatt passt:

<style>
#sticky_div's_name_here { position: sticky; top: 0; }
</style>

Ersetzen Sie einfach durch #sticky_div's_name_hereden Namen Ihres Div, dh wenn Ihr Div <div id="example">wäre, würden Sie setzen #example { position: sticky; top: 0; }.

Meine Lösung ist etwas ausführlich, behandelt jedoch die variable Positionierung vom linken Rand für zentrierte Layouts.

// Ensurs that a element (usually a div) stays on the screen
//   aElementToStick   = The jQuery selector for the element to keep visible
global.makeSticky = function (aElementToStick) {
    var $elementToStick = $(aElementToStick);
    var top = $elementToStick.offset().top;
    var origPosition = $elementToStick.css('position');

    function positionFloater(a$Win) {
        // Set the original position to allow the browser to adjust the horizontal position
        $elementToStick.css('position', origPosition);

        // Test how far down the page is scrolled
        var scrollTop = a$Win.scrollTop();
        // If the page is scrolled passed the top of the element make it stick to the top of the screen
        if (top < scrollTop) {
            // Get the horizontal position
            var left = $elementToStick.offset().left;
            // Set the positioning as fixed to hold it's position
            $elementToStick.css('position', 'fixed');
            // Reuse the horizontal positioning
            $elementToStick.css('left', left);
            // Hold the element at the top of the screen
            $elementToStick.css('top', 0);
        }
    }

    // Perform initial positioning
    positionFloater($(window));

    // Reposition when the window resizes
    $(window).resize(function (e) {
        positionFloater($(this));
    });

    // Reposition when the window scrolls
    $(window).scroll(function (e) {
        positionFloater($(this));
    });
};

Hier ist eine weitere Version für diejenigen, die Probleme mit den anderen haben. Es fasst die in dieser doppelten Frage diskutierten Techniken zusammen und generiert die erforderlichen Hilfs-DIVs dynamisch, sodass kein zusätzlicher HTML-Code erforderlich ist.

CSS:

.sticky { position:fixed; top:0; }

JQuery:

function make_sticky(id) {
    var e = $(id);
    var w = $(window);
    $('<div/>').insertBefore(id);
    $('<div/>').hide().css('height',e.outerHeight()).insertAfter(id);
    var n = e.next();
    var p = e.prev();
    function sticky_relocate() {
      var window_top = w.scrollTop();
      var div_top = p.offset().top;
      if (window_top > div_top) {
        e.addClass('sticky');
        n.show();
      } else {
        e.removeClass('sticky');
        n.hide();
      }
    }
    w.scroll(sticky_relocate);
    sticky_relocate();
}

Um ein Element klebrig zu machen, gehen Sie wie folgt vor:

make_sticky('#sticky-elem-id');

Wenn das Element klebrig wird, verwaltet der Code die Position des verbleibenden Inhalts, um zu verhindern, dass er in die Lücke springt, die das klebrige Element hinterlässt. Außerdem wird das klebrige Element beim Zurückblättern wieder in seine ursprüngliche nicht klebrige Position zurückgebracht.

Hier ist eine erweiterte Version von Josh Lees Antwort. Wenn Sie möchten, dass sich das div in der Seitenleiste rechts befindet und innerhalb eines Bereichs schwebt (dh Sie müssen die oberen und unteren Ankerpositionen angeben). Es behebt auch einen Fehler, wenn Sie dies auf Mobilgeräten anzeigen (Sie müssen die linke Bildlaufposition überprüfen, sonst bewegt sich das div vom Bildschirm).

function moveScroller() {
    var move = function() {
        var st = $(window).scrollTop();
        var sl = $(window).scrollLeft();
        var ot = $("#scroller-anchor-top").offset().top;
        var ol = $("#scroller-anchor-top").offset().left;
        var bt = $("#scroller-anchor-bottom").offset().top;
        var s = $("#scroller");
        if(st > ot) {
            if (st < bt - 280) //280px is the approx. height for the sticky div
            {
                s.css({
                    position: "fixed",
                    top: "0px",
                    left: ol-sl
                }); 
            }
            else
            {
                s.css({
                    position: "fixed",
                    top: bt-st-280,
                    left: ol-sl
                }); 
            }
        } else {
            s.css({
                position: "relative",
                top: "",
                left: ""
            });

        }
    };
    $(window).scroll(move);
    move();
}

Ich bin darauf gestoßen, als ich nach dem gleichen Ding gesucht habe. Ich weiß, dass es eine alte Frage ist, aber ich dachte, ich würde eine neuere Antwort anbieten.

Scrollorama hat eine "Pin it" -Funktion, die genau das ist, wonach ich gesucht habe.

http://johnpolacek.github.io/scrollorama/

Die Informationen zur Beantwortung dieser anderen Frage können Ihnen helfen, Evan:

Überprüfen Sie nach dem Scrollen, ob das Element sichtbar ist

Grundsätzlich möchten Sie den Stil des Elements so ändern, dass es erst dann auf "fest" gesetzt wird, wenn Sie überprüft haben, ob der Wert "document.body.scrollTop" mindestens dem oberen Rand Ihres Elements entspricht.

Die akzeptierte Antwort funktioniert, kehrt jedoch nicht zur vorherigen Position zurück, wenn Sie darüber scrollen. Es klebt immer oben, nachdem es dort platziert wurde.

  $(window).scroll(function(e) {
    $el = $('.fixedElement');
    if ($(this).scrollTop() > 42 && $el.css('position') != 'fixed') {
      $('.fixedElement').css( 'position': 'fixed', 'top': '0px');

    } else if ($(this).scrollTop() < 42 && $el.css('position') != 'relative') {
      $('.fixedElement').css( 'relative': 'fixed', 'top': '42px');
//this was just my previous position/formating
    }
  });

Jleedevs Antwort würde funktionieren, aber ich konnte sie nicht zum Laufen bringen. Seine Beispielseite hat auch nicht funktioniert (für mich).

Sie können 3 zusätzliche Zeilen hinzufügen, sodass der Div an seiner alten Stelle bleibt, wenn der Benutzer nach oben zurückblättert:

Hier ist der Code:

if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
    $('.fixedElement').css({'position': 'relative', 'top': '200px'});
}

Ich habe Links in einem Div eingerichtet, so dass es eine vertikale Liste von Buchstaben- und Zahlenlinks ist.

#links {
    float:left;
    font-size:9pt;
    margin-left:0.5em;
    margin-right:1em;
    position:fixed;
    text-align:center;
    width:0.8em;
}

Ich habe dann diese praktische jQuery-Funktion eingerichtet, um die geladene Position zu speichern und die Position dann auf fest zu ändern, wenn ich über diese Position hinaus scrolle.

HINWEIS: Dies funktioniert nur, wenn die Links beim Laden der Seite sichtbar sind !!

var listposition=false;
jQuery(function(){
     try{
        ///// stick the list links to top of page when scrolling
        listposition = jQuery('#links').css({'position': 'static', 'top': '0px'}).position();
        console.log(listposition);
        $(window).scroll(function(e){
            $top = $(this).scrollTop();
            $el = jQuery('#links');
            //if(typeof(console)!='undefined'){
            //    console.log(listposition.top,$top);
            //}
            if ($top > listposition.top && $el.css('position') != 'fixed'){
                $el.css({'position': 'fixed', 'top': '0px'});
            }
            else if ($top < listposition.top && $el.css('position') == 'fixed'){
                $el.css({'position': 'static'});
            }
        });

    } catch(e) {
        alert('Please vendor [email protected] (Myvendor JavaScript Issue)');
    }
});

Ich habe einige der oben genannten Arbeiten verwendet, um diese Technologie zu erstellen. Ich habe es ein bisschen verbessert und dachte, ich würde meine Arbeit teilen. Hoffe das hilft.

jsfuddle Code

function scrollErrorMessageToTop() {
    var flash_error = jQuery('#flash_error');
    var flash_position = flash_error.position();

    function lockErrorMessageToTop() {
        var place_holder = jQuery("#place_holder");
        if (jQuery(this).scrollTop() > flash_position.top && flash_error.attr("position") != "fixed") {
            flash_error.css({
                'position': 'fixed',
                'top': "0px",
                "width": flash_error.width(),
                "z-index": "1"
            });
            place_holder.css("display", "");
        } else {
            flash_error.css('position', '');
            place_holder.css("display", "none");
        }

    }
    if (flash_error.length > 0) {
        lockErrorMessageToTop();

        jQuery("#flash_error").after(jQuery("<div id='place_holder'>"));
        var place_holder = jQuery("#place_holder");
        place_holder.css({
            "height": flash_error.height(),
            "display": "none"
        });
        jQuery(window).scroll(function(e) {
            lockErrorMessageToTop();
        });
    }
}
scrollErrorMessageToTop();​

Dies ist eine etwas dynamischere Methode zum Scrollen. Es braucht etwas Arbeit und ich werde es irgendwann in einen Stecker verwandeln, aber das habe ich mir nach einer Stunde Arbeit ausgedacht.

In Javascript können Sie Folgendes tun:

var element = document.getElementById("myid");
element.style.position = "fixed";
element.style.top = "0%";

Keine exakte Lösung, aber eine gute Alternative

NUR diese CSS-Bildlaufleiste oben auf dem Bildschirm . Gelöst alle das Problem mit nur CSS , NO JavaScript, NO JQuery, kein Gehirn Arbeit ( lol ).

Viel Spaß mit meiner Geige : D Alle Codes sind dort enthalten :)

CSS

#menu {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #a1cb2f;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
}

.w {
    width: 900px;
    margin: 0 auto;
    margin-bottom: 40px;
}<br type="_moz">

Setzen Sie den Inhalt lange genug ein, damit Sie den Effekt hier sehen können :) Oh, und die Referenz ist auch dort, weil er seine Anerkennung verdient

NUR CSS Bildlaufleiste am oberen Bildschirmrand

Hier ist ein Beispiel, das ein jquery-sichtbares Plugin verwendet: http://jsfiddle.net/711p4em4/ .

HTML:

<div class = "wrapper">
    <header>Header</header>
    <main>
        <nav>Stick to top</nav>
        Content
    </main>
    <footer>Footer</footer>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #e2e2e2;
}

.wrapper > header,
.wrapper > footer {
    font: 20px/2 Sans-Serif;
    text-align: center;
    background-color: #0040FF;
    color: #fff;
}

.wrapper > main {
    position: relative;
    height: 500px;
    background-color: #5e5e5e;
    font: 20px/500px Sans-Serif;
    color: #fff;
    text-align: center;
    padding-top: 40px;
}

.wrapper > main > nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font: 20px/2 Sans-Serif;
    color: #fff;
    text-align: center;
    background-color: #FFBF00;
}

.wrapper > main > nav.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

JS (einschließlich jquery-sichtbares Plugin):

(function($){

    /**
     * Copyright 2012, Digital Fusion
     * Licensed under the MIT license.
     * http://teamdf.com/jquery-plugins/license/
     *
     * @author Sam Sehnert
     * @desc A small plugin that checks whether elements are within
     *       the user visible viewport of a web browser.
     *       only accounts for vertical position, not horizontal.
     */
    var $w = $(window);
    $.fn.visible = function(partial,hidden,direction){

        if (this.length < 1)
            return;

        var $t        = this.length > 1 ? this.eq(0) : this,
            t         = $t.get(0),
            vpWidth   = $w.width(),
            vpHeight  = $w.height(),
            direction = (direction) ? direction : 'both',
            clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;

        if (typeof t.getBoundingClientRect === 'function'){

            // Use this native browser method, if available.
            var rec = t.getBoundingClientRect(),
                tViz = rec.top    >= 0 && rec.top    <  vpHeight,
                bViz = rec.bottom >  0 && rec.bottom <= vpHeight,
                lViz = rec.left   >= 0 && rec.left   <  vpWidth,
                rViz = rec.right  >  0 && rec.right  <= vpWidth,
                vVisible   = partial ? tViz || bViz : tViz && bViz,
                hVisible   = partial ? lViz || rViz : lViz && rViz;

            if(direction === 'both')
                return clientSize && vVisible && hVisible;
            else if(direction === 'vertical')
                return clientSize && vVisible;
            else if(direction === 'horizontal')
                return clientSize && hVisible;
        } else {

            var viewTop         = $w.scrollTop(),
                viewBottom      = viewTop + vpHeight,
                viewLeft        = $w.scrollLeft(),
                viewRight       = viewLeft + vpWidth,
                offset          = $t.offset(),
                _top            = offset.top,
                _bottom         = _top + $t.height(),
                _left           = offset.left,
                _right          = _left + $t.width(),
                compareTop      = partial === true ? _bottom : _top,
                compareBottom   = partial === true ? _top : _bottom,
                compareLeft     = partial === true ? _right : _left,
                compareRight    = partial === true ? _left : _right;

            if(direction === 'both')
                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
            else if(direction === 'vertical')
                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
            else if(direction === 'horizontal')
                return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
        }
    };

})(jQuery);

$(function() {
    $(window).scroll(function() {
        $(".wrapper > header").visible(true) ?
            $(".wrapper > main > nav").removeClass("fixed") :
            $(".wrapper > main > nav").addClass("fixed");
    });
});

klebrig, bis die Fußzeile die Div trifft:

function stickyCostSummary() {
    var stickySummary = $('.sticky-cost-summary');
    var scrollCostSummaryDivPosition = $(window).scrollTop();
    var footerHeight = $('#footer').height();
    var documentHeight = $(document).height();
    var costSummaryHeight = stickySummary.height();
    var headerHeight = 83;
    var footerMargin = 10;
    var scrollHeight = 252;
    var footerPosition = $('#footer').offset().top;

    if (scrollCostSummaryDivPosition > scrollHeight && scrollCostSummaryDivPosition <= (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) {
        stickySummary.removeAttr('style');
        stickySummary.addClass('fixed');

    } else if (scrollCostSummaryDivPosition > (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) {
        stickySummary.removeClass('fixed');
        stickySummary.css({
          "position" : "absolute",
          "top" : (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin - scrollHeight) + "px"
      });
    } else {
        stickySummary.removeClass('fixed');
        stickySummary.css({
            "position" : "absolute",
            "top" : "0"
        });
    }
}

$window.scroll(stickyCostSummary);