Ekrana kaydırıldıktan sonra ekranın üstüne bir div stick nasıl yapabilirim?

Bir içerik bloğunun altında bulunan bir div oluşturmak istiyorum, ancak sayfa üst sınırıyla temas edecek kadar kaydırıldığında, yerine sabitlenir ve sayfa ile kaydırılır.

Öğenizi sabit olarak konumlandırarak css komutunu kullanabilirsiniz :

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

Düzenleme: Öğeyi mutlak konuma sahip olmalısınız, kaydırma ofseti öğeye ulaştığında sabit olarak değiştirilmeli ve üst konum sıfıra ayarlanmalıdır.

ScrollTop işleviyle belgenin üst kaydırma ofsetini algılayabilirsiniz :

$(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'}); 
  } 
});

Kaydırma ofseti 200'e ulaştığında, öğe sabit olarak yerleştirildiği için tarayıcı penceresinin üstüne yapışacaktır .

Bu örneği Google Code'un sorun sayfasında ve (yalnızca son zamanlarda) Stack Overflow'ın düzenleme sayfasında gördünüz .

Geri gittiğinizde CMS'nin yanıtı konumlandırmayı geri döndürmez. Stack Overflow'un utanmazca çalınan kodu:

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> 

Ve basit bir canlı demo .

position: stickyChrome, Firefox ve Safari'de desteklenen yeni, komut dosyası içermeyen bir alternatiftir . HTML5Rocks ve demo ile Mozilla belgeleri hakkındaki makaleye bakın .

Ocak 2017 ve Chrome 56'nın piyasaya sürülmesinden itibaren, ortak kullanımdaki çoğu tarayıcı CSS'deki position: stickymülkü desteklemektedir .

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

Firefox ve Chrome'da benim için hile yapıyor.

Safari'de hala kullanmanız gerekiyor position: -webkit-sticky.

Çoklu dolgular Internet Explorer ve Edge için kullanılabilir; https://github.com/wilddeer/stickyfill iyi bir şey gibi görünüyor.

Sizinle aynı sorunu yaşadım ve ilgilenmek için bir jQuery eklentisi hazırladım. Aslında insanların burada listelediği tüm sorunları çözüyor, ayrıca birkaç isteğe bağlı özellik de ekliyor.

Seçenekler

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

Ve nasıl jquery olmadan (GÜNCELLEME: şimdi sadece CSS ile yapabileceğiniz diğer cevaplara bakın)

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>

Ben jquery ile böyle yaptım. Tüm bunlar yığın taşması üzerindeki çeşitli cevaplardan birlikte kaldırıldı. Bu çözüm daha hızlı performans için seçicileri önbelleğe alır ve ayrıca yapışkan div yapışkan hale geldiğinde "atlama" sorununu çözer.

Jsfiddle üzerinde göz atın: 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);
        }
    });
});

İşte başka bir seçenek:

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'});
});

Sizin #myElementToStickile başlamalıdır position:absoluteCSS özelliği.

As Josh Lee ve Hart t Colin' söylediler, isteğe bağlı olarak sadece kullanabilirsiniz position: sticky; top: 0;en kaydırma istediğiniz div müracaat ...

Ayrıca, yapmanız gereken tek şey bunu sayfanızın üstüne kopyalamak veya harici bir CSS sayfasına sığacak şekilde biçimlendirmektir:

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

Sadece div'inizin #sticky_div's_name_hereadıyla değiştirin , yani div'iniz <div id="example">olsaydı #example { position: sticky; top: 0; }.

Benim çözümüm biraz ayrıntılı, ama ortalanmış düzenler için sol kenardan değişken konumlandırma işler.

// 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));
    });
};

İşte diğerleriyle sorunları olanları denemek için bir sürüm daha. Bu yinelenen soruda tartışılan teknikleri bir araya getirir ve gerekli yardımcı DIV'leri dinamik olarak üretir, böylece fazladan HTML gerekmez.

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();
}

Bir öğeyi yapışkan hale getirmek için şunları yapın:

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

Eleman yapışkan hale geldiğinde, kod yapışkan içeriğin bıraktığı boşluğa atlamasını önlemek için kalan içeriğin konumunu yönetir. Ayrıca, üzerine geri kaydırırken yapışkan öğeyi orijinal yapışkan olmayan konumuna geri döndürür.

Josh Lee'nin cevabı için genişletilmiş bir versiyon. Div'in sağ taraftaki kenar çubuğunda olmasını ve bir aralık içinde yüzmesini istiyorsanız (yani, üst ve alt bağlantı konumlarını belirtmeniz gerekir). Ayrıca bunu mobil cihazlarda görüntülediğinizde bir hatayı düzeltir (sol kaydırma konumunu kontrol etmeniz gerekir, aksi takdirde div ekrandan çıkar).

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();
}

Aynı şeyi ararken buna rastladım. Bunun eski bir soru olduğunu biliyorum ama daha yeni bir cevap vereceğimi düşündüm.

Scrollorama'nın tam da aradığım şey 'pin it' özelliği var.

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

Bu diğer soruyu cevaplamak için verilen bilgiler size yardımcı olabilir Evan:

Kaydırma işleminden sonra öğenin görünür olup olmadığını kontrol edin

Temelde öğenin stilini, yalnızca document.body.scrollTop değerinin öğenizin üst kısmına eşit veya ondan daha büyük olduğunu doğruladıktan sonra düzeltmek üzere değiştirmek istersiniz.

Kabul edilen cevap çalışır, ancak üzerine kaydırırsanız önceki konuma geri gitmez. Oraya yerleştirildikten sonra her zaman tepeye yapışır.

  $(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
    }
  });

jleedev'in cevabı kim işe yarayabilir, ama işe yarayamadım. Örnek sayfası da işe yaramadı (benim için).

3 ekstra satır ekleyebilirsiniz, böylece kullanıcı en üste geri döndüğünde div eski yerine yapışır:

İşte kod:

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

Bir div içinde bağlantılar kurulum var, bu yüzden harf ve sayı bağlantılarının dikey bir listesi.

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

Daha sonra yüklenen konumu kaydetmek için bu kullanışlı jQuery işlevini ayarladım ve ardından bu konumun ötesine geçerken konumu sabit olarak değiştirdim.

NOT: Bu yalnızca bağlantılar sayfa yüklemesinde görünürse çalışır !!

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 admin@mydomain.com (Myvendor JavaScript Issue)');
    }
});

Bu teknolojiyi oluşturmak için yukarıdaki çalışmalardan bazılarını kullandım. Biraz geliştirdim ve çalışmamı paylaşacağımı düşündüm. Bu yardımcı olur umarım.

jsfuddle Kodu

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();​

Bu kaydırma yapmak için biraz daha dinamik. Biraz çalışma gerektiriyor ve bir noktada bunu bir tıkaç haline getireceğim, ancak bu, bir saatlik çalışmadan sonra bulduğum şeydi.

Javascript'te şunları yapabilirsiniz:

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

Kesin bir çözüm değil, dikkate alınması gereken harika bir alternatif

SADECE bu CSS Ekran kaydırma çubuğunun üstünde . SADECE CSS , NO JavaScript, NO JQuery, No Brain work ( lol ) ile tüm sorunu çözdü .

Benim keman keyfini çıkarın : D tüm kodları orada dahil :)

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">

İçeriği burada görebilmek için yeterince uzun koyun :) Oh, ve referansı da orada, çünkü kredisini hak ediyor

YALNIZCA CSS Ekranın üst kısmındaki kaydırma çubuğu

İşte jquery-görünür eklentiyi kullanan bir örnek: 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 (jquery-görünür eklentiyi içerir):

(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");
    });
});

altbilgi div isabet kadar yapışkan:

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);