Bagaimana saya bisa membuat div stick ke bagian atas layar setelah digulir?


305

Saya ingin membuat div, yang terletak di bawah blok konten tetapi setelah halaman telah cukup digulir untuk menghubungi batas atasnya, menjadi tetap di tempatnya dan menggulir dengan halaman.


5
Pada Juni 2014, plugin jyery Sticky-kit adalah salah satu opsi termudah, memberikan penghalang yang sangat rendah untuk masuk dan banyak fitur. Tempat yang bagus untuk memulai jika Anda mencari cara mudah untuk turun dengan cepat.
user456584


32
Menambahkan CSS position: sticky; top:0;berfungsi di sebagian besar browser pada Januari 2017.
Colin 't Hart

9
Astaga, position: sticky;benda itu ajaib.
tscizzle

Jawaban:


259

Anda bisa menggunakan cukup css, memposisikan elemen Anda sebagai tetap :

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

Sunting: Anda harus memiliki elemen dengan posisi absolut, setelah offset gulir telah mencapai elemen, itu harus diubah menjadi tetap, dan posisi teratas harus ditetapkan ke nol.

Anda dapat mendeteksi offset gulir atas dokumen dengan fungsi scrollTop :

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

Ketika offset gulir mencapai 200, elemen akan menempel di bagian atas jendela browser, karena ditempatkan sebagai tetap.


4
itu tidak mencapai apa yang saya inginkan. Saya ingin elemen dimulai pada 200px di bawah bagian atas halaman (untuk memberikan ruang bagi konten lain) dan kemudian setelah pengguna menggulir ke bawah diperbaiki di atas.
evanr

3
hasil edit Anda memang memenuhi kebutuhan pertanyaan sekarang, tetapi Anda masih memiliki masalah ketika halaman bergulir kembali ke atas. Anda bisa setelah mencapai elemen scrollTop menyimpannya di suatu tempat, dan ketika halaman menyentuh posisi itu lagi (ketika menggulir ke atas) ubah kembali css ke default ... mungkin lebih baik melakukan ini dengan .toggleClass lalu ...
Sander

9
Ini seperti apa ketika dengan tetapi saya harus menghapus posisi tetap ketika jendela digulir kembali ke atas. if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed') { $('.fixedElement').css({'position': 'static', 'top': '0px'}); }
Derrick Petzold

1
@DerrickPetzold Saya memasukkannya ke dalam jawaban, hal-hal yang cukup penting :)
MarioDS

1
yang new examplelink yang Anda berikan begitu banyak bersih dan jelas bahwa saya bahkan tidak bisa melihatnya! -_-
sohaiby

245

Anda telah melihat contoh ini di halaman masalah Google Code dan (hanya baru-baru ini) di halaman edit Stack Overflow.

Jawaban CMS tidak mengembalikan posisi ketika Anda menggulir mundur. Inilah kode yang dicuri tanpa malu-malu dari 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> 

Dan demo langsung yang sederhana .

Alternatif baru yang bebas skrip adalah position: stickyyang didukung di Chrome, Firefox, dan Safari. Lihat artikel tentang HTML5Rocks dan demo , dan dokumen Mozilla .


3
Untuk beberapa alasan, {scroll: false} memberi saya masalah (jQuery 1.6.2). Tampaknya bekerja tanpanya. Fork dari demo tertaut. Adakah ide jika itu memiliki tujuan?
Eddie

Saya mengalami banyak masalah dengan ini, untuk kehidupan saya saya tidak dapat meniru, saya bahkan telah mencoba untuk meniru demo langsung dan itu tidak berfungsi. adakah yang bisa menautkan ke tutorial yang menyediakan petunjuk langkah demi langkah?
Trevor Dupp

2
Ini sepertinya berfungsi dengan baik, ketika saya menggunakan versi jQuery yang sama dengan demo (1.3.2). Pada titik tertentu offsetpasti berhenti menerima objek sebagai input api.jquery.com/offset . @ Eddie Modifikasi Anda harus aman dengan jQuery saat ini.
Graeme

1
Apakah ada alasan Anda tidak bisa mengganti var d = $("#scroller-anchor").offset().top;dengan var d = $("#sidebar").offset().top;dan membuang div scroller-anchor kosong bersama-sama? Ini garpu saya untuk menunjukkan apa yang saya bicarakan.
Mike Deck

@ MikeDeck Saya menduga bahwa jika ada margin atau bantalan, Anda ingin dapat mengontrol di mana scroller diposisikan relatif terhadap wadah.
Josh Lee

72

Pada Januari 2017 dan rilis Chrome 56, sebagian besar browser yang umum digunakan mendukung position: stickyproperti di CSS.

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

melakukan trik untuk saya di Firefox dan Chrome.

Di Safari Anda masih perlu menggunakan position: -webkit-sticky.

Polyfill tersedia untuk Internet Explorer dan Edge; https://github.com/wilddeer/stickyfill tampaknya bagus.


5
Ini didukung di sebagian besar browser yang umum digunakan saat ini. Lihat caniuse.com/#feat=css-sticky Kedua, saya lebih suka solusi yang bisa dirubah menjadi 2 baris kode ke versi yang membutuhkan Javascript khusus. Dan itu juga bukti masa depan. Gunakan polyfill jika Anda khawatir tentang kompatibilitas browser.
Colin 't Hart

1
Tidak bisa lebih mudah dari ini :)
mestarted

1
Saya ingin menambahkan komentar ini bahwa kita dapat z-index: 99999 ;, karena jika tidak ketika naik ke atas, konten lainnya akan di-render terlebih dahulu. Tetapi ini harus menjadi solusi yang diterima.
dayanrr91

Hanya membungkusnya dengan div dengan id = "thing_to_stick"
Anton

Solusi sederhana dan mudah. Dan berfungsi lebih baik daripada solusi lain dalam kasus saya tentu saja.
fsevenm

33

Saya memiliki masalah yang sama dengan Anda dan akhirnya membuat plugin jQuery untuk mengatasinya. Ini benar-benar memecahkan semua masalah yang orang-orang sebutkan di sini, plus itu menambahkan beberapa fitur opsional juga.

Pilihan

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


1
Hei! Terima kasih! Ini adalah solusi hebat, dan terima kasih sudah berbagi, pasti itu menghemat banyak waktu saya. Ini harus menjadi solusi yang diterima secara keseluruhan untuk pertanyaan ini, karena sejauh yang saya baca, ini adalah solusi yang paling lengkap. Pada dasarnya, yang lain tidak menyelesaikan masalah dengan posisi-X asli dari sebuah blok setelah posisi: gaya tetap diterapkan. Anda memecahkan masalah ini. Sungguh, terima kasih banyak!
Marcos Buarque

Hei Donny, juga suka plugin Anda (v1.4.1) ... memang menemukan satu masalah, Blok elelments kehilangan lebar mereka jika tidak ada yang ditentukan. Jadi diubah ketika melepaskan ... hanya dengan mengatur lebar sehingga tetap sama. code// lepaskan panel node.css ({"margin": 0, "left": nodeLeft, "top": newNodeTop, "position": "fixed", "width": node.width ()}); code
Will Hancock

Mencari dan mencoba banyak solusi, dan ini berhasil "langsung dari kotak." Pekerjaan yang luar biasa! Terima kasih!
ajtatum

2
@WillHancock Saya telah menambahkan dukungan iPad, memperbaiki bug penyegaran dan menambahkan pada acaraDetached & onReattached. Acara baru akan memberi Anda akses ke panel & spacerpanel setelah terlepas & disambungkan kembali.
Donny V.

4
Juga menambahkan opsi parentSelector untuk mendukung scrolling divs.
Donny V.

24

Dan inilah caranya tanpa jquery (PEMBARUAN: lihat jawaban lain di mana Anda sekarang dapat melakukan ini hanya dengan CSS)

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>


4
Terima kasih! Semakin sulit menemukan solusi JS asli hari ini. Ini bekerja dengan sempurna.
Sherri

Terima kasih banyak, ini bekerja dengan sempurna karena jquery bertentangan dengan beberapa kode perusahaan lama yang dimiliki proyek saya
sng

meskipun saya mengalami masalah di mana jika saya gulir ke bagian bawah halaman itu secara otomatis akan pop saya kembali ke atas.
sng

@ ng Apakah halaman contoh saya melakukan itu?
Jim W mengatakan mengembalikan Monica

@ Jim Saya menemukan masalahnya. Saya mencoba menggunakannya dengan bilah menu berbasis vertikal di sebelah div konten utama di sebelah kiri. Itu mengganggu saat Anda menggulir ke bawah karena tidak dapat menentukan kapan itu mengenai bagian bawah halaman dengan benar. Saya akhirnya menambahkan sebaris kode untuk mengatur tinggi wadah div ke ukuran layar jendela ke pendengar acara gulir
sng

9

Ini adalah bagaimana saya melakukannya dengan jquery. Ini semua dirakit dari berbagai jawaban pada stack overflow. Solusi ini cache penyeleksi untuk kinerja yang lebih cepat dan juga memecahkan masalah "melompat" ketika sticky div menjadi lengket.

Lihat di 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);
        }
    });
});

7

Berikut ini pilihan lain:

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

Anda #myElementToStickharus mulai dengan position:absoluteproperti CSS.


1
Saya pikir ini adalah solusi yang sangat bersih dan mudah. Saya hanya tidak akan memposisikan elemen "absolut" - ini mungkin merusak tata letak - Saya hanya akan mengaturnya menjadi statis.
Gerfried

4

Seperti yang dikatakan Josh Lee dan Colin 't Hart , Anda dapat menggunakan sajaposition: sticky; top: 0; melamar ke div yang Anda inginkan ...

Plus, satu-satunya hal yang harus Anda lakukan adalah menyalin ini ke bagian atas halaman Anda atau memformatnya agar sesuai dengan lembar CSS eksternal:

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

Ganti saja #sticky_div's_name_heredengan nama div Anda, yaitu jika div <div id="example">Anda yang akan Anda masukkan #example { position: sticky; top: 0; }.


1

Solusi saya sedikit bertele-tele, tetapi menangani penentuan posisi variabel dari tepi kiri untuk tata letak terpusat.

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

1

Berikut ini satu versi lagi untuk dicoba bagi yang memiliki masalah dengan yang lain. Ini menggabungkan teknik yang dibahas dalam pertanyaan duplikat ini , dan menghasilkan DIV pembantu yang diperlukan secara dinamis sehingga tidak diperlukan HTML tambahan.

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

Untuk membuat elemen lengket, lakukan:

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

Ketika elemen menjadi lengket, kode mengelola posisi konten yang tersisa agar tidak melompat ke celah yang ditinggalkan oleh elemen lengket. Ini juga mengembalikan elemen lengket ke posisi non-lengket aslinya ketika menggulir kembali di atasnya.


Pendekatan Anda sangat mirip dengan pendekatan JohnB . Mempertimbangkan perbedaan Anda pada jawaban itu, saya bertanya-tanya (1) Apakah ada keuntungan menggunakan "pembantu pembantu" kedua (bukan hanya 1 seperti penggunaan JohnB), dan (2) Apakah ada keuntungan menggunakan hide () dan perlihatkan () alih-alih hanya mengatur tinggi pembantu pembantu (seperti yang dilakukan JohnB)? Mungkin perbedaan kinerja? Sejauh ini saya belum dapat membedakan perbedaan tetapi mungkin skenario tertentu akan memiliki perbedaan (seperti mungkin melibatkan elemen inline atau sesuatu), jadi itu sebabnya saya bertanya. Terima kasih.
Jason Frank

1

Ini adalah versi yang diperluas untuk jawaban Josh Lee. Jika Anda ingin div berada di bilah sisi ke kanan, dan mengapung dalam kisaran (yaitu, Anda perlu menentukan posisi jangkar atas dan bawah). Ini juga memperbaiki bug ketika Anda melihatnya di perangkat seluler (Anda perlu memeriksa posisi gulir kiri jika div tidak akan pindah layar).

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


0

Info yang diberikan untuk menjawab pertanyaan lain ini mungkin dapat membantu Anda, Evan:

Periksa apakah elemen terlihat setelah bergulir

Anda pada dasarnya ingin memodifikasi gaya elemen untuk mengaturnya agar tetap hanya setelah memverifikasi bahwa nilai document.body.scrollTop sama dengan atau lebih besar dari bagian atas elemen Anda.


0

Jawaban yang diterima berfungsi tetapi tidak kembali ke posisi sebelumnya jika Anda menggulir di atasnya. Itu selalu menempel di atas setelah ditempatkan di sana.

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

Tanggapan jleedev akan berhasil, tetapi saya tidak dapat membuatnya bekerja. Halaman contohnya juga tidak berfungsi (untuk saya).


0

Anda dapat menambahkan 3 baris tambahan sehingga ketika pengguna menggulir kembali ke atas, div akan menempel di tempatnya yang lama:

Ini kodenya:

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

0

Saya memiliki pengaturan tautan dalam div sehingga ini adalah daftar vertikal tautan surat dan angka.

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

Saya kemudian mengatur fungsi jQuery yang berguna ini untuk menyimpan posisi yang dimuat dan kemudian mengubah posisi untuk diperbaiki ketika menggulir di luar posisi itu.

CATATAN: ini hanya berfungsi jika tautannya terlihat pada pemuatan halaman !!

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

0

Saya menggunakan beberapa pekerjaan di atas untuk membuat teknologi ini. Saya memperbaikinya sedikit dan berpikir saya akan membagikan pekerjaan saya. Semoga ini membantu.

Kode jsfuddle

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

Ini sedikit lebih dinamis dari cara melakukan scroll. Memang perlu beberapa pekerjaan dan saya pada suatu titik akan mengubahnya menjadi pluging tapi tapi ini adalah apa yang saya dapatkan setelah jam kerja.


0

Dalam javascript Anda dapat melakukan:

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

0

Bukan solusi tepat tetapi alternatif yang bagus untuk dipertimbangkan

CSS ini HANYA Bagian atas bilah gulir layar . Memecahkan semua masalah dengan HANYA CSS , TANPA JavaScript, TANPA JQuery, Tanpa Otak bekerja ( lol ).

Selamat menikmati biola saya : D semua kode sudah termasuk di sana :)

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

Letakkan konten cukup lama sehingga Anda dapat melihat efeknya di sini :) Oh, dan referensi ada di sana juga, untuk kenyataan ia layak mendapatkan kreditnya

CSS ONLY Bagian atas bilah gulir layar


Sedikit offtopic;)
Tokk

Saya tidak menentang solusi yang baik, tetapi kode dalam jawaban Anda menyediakan cara untuk membuat sesuatu seperti menu untuk selalu tetap di atas. Tapi itu bukan pertanyaan ...
Tokk

Anda hanya memperbaiki div dan tidak melakukan apa pun yang lengket pada scrolling.
yogihosting

0

Berikut ini contoh yang menggunakan plugin jquery-visible: 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 (termasuk plugin jquery-visible):

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

-1

sticky hingga footer mengenai div:

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);
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.