Làm cách nào tôi có thể tạo một thanh div ở phía trên màn hình khi nó được cuộn đến?

Tôi muốn tạo một div, nằm bên dưới một khối nội dung nhưng một khi trang đã được cuộn đủ để liên hệ với ranh giới trên cùng của nó, sẽ được cố định tại chỗ và cuộn với trang.

Bạn có thể sử dụng css đơn giản, định vị phần tử của bạn là cố định :

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

Biên tập: Bạn nên có phần tử với vị trí tuyệt đối, khi phần bù cuộn đã đạt đến phần tử, phần này sẽ được thay đổi thành cố định và vị trí trên cùng phải được đặt thành không.

Bạn có thể phát hiện phần bù cuộn trên cùng của tài liệu bằng chức năng 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'}); 
  } 
});

Khi độ lệch cuộn đạt tới 200, phần tử sẽ dính vào đầu cửa sổ trình duyệt, vì được đặt dưới dạng cố định.

Bạn đã thấy ví dụ này trên trang vấn đề của Google Code và (chỉ gần đây) trên trang chỉnh sửa của Stack Overflow.

Câu trả lời của CMS không hoàn nguyên định vị khi bạn cuộn ngược lên. Đây là mã bị đánh cắp đáng xấu hổ từ 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> 

Và một bản demo trực tiếp đơn giản .

Một giải pháp thay thế mới, không có tập lệnh là position: sticky, được hỗ trợ trong Chrome, Firefox và Safari. Xem bài viết về HTML5Rocks và bản demo và tài liệu Mozilla .

Kể từ tháng 1 năm 2017 và phát hành Chrome 56, hầu hết các trình duyệt sử dụng chung đều hỗ trợ thuộc position: stickytính trong CSS.

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

thực hiện mẹo cho tôi trong Firefox và Chrome.

Trong Safari bạn vẫn cần sử dụng position: -webkit-sticky.

Polyfill có sẵn cho Internet Explorer và Edge; https://github.com/wilddeer/stickyfill dường như là một thứ tốt.

Tôi gặp vấn đề tương tự như bạn và cuối cùng đã tạo ra một plugin jQuery để chăm sóc nó. Nó thực sự giải quyết tất cả các vấn đề mà mọi người đã liệt kê ở đây, cộng với một số tính năng tùy chọn nữa.

Tùy chọn

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

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

Và đây là cách không có jquery (CẬP NHẬT: xem các câu trả lời khác mà bây giờ bạn có thể làm điều này chỉ với 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>

Đây là cách tôi đã làm nó với jquery. Tất cả điều này được ghép lại với nhau từ các câu trả lời khác nhau về lỗi tràn stack. Giải pháp này lưu trữ các bộ chọn để có hiệu suất nhanh hơn và cũng giải quyết vấn đề "nhảy" khi div dính trở nên dính.

Hãy xem thử trên 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);
        }
    });
});

Đây là một lựa chọn khác:

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

Bạn #myElementToSticknên bắt đầu với position:absolutethuộc tính CSS.

Như Josh Lee và Colin 't Hart đã nói, bạn có thể tùy ý sử dụng position: sticky; top: 0;áp dụng cho div mà bạn muốn cuộn tại ...

Ngoài ra, điều duy nhất bạn sẽ phải làm là sao chép nó vào đầu trang hoặc định dạng nó để phù hợp với một bảng CSS bên ngoài:

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

Chỉ cần thay thế #sticky_div's_name_herebằng tên div của bạn, tức là nếu div của bạn là <div id="example">bạn sẽ đặt #example { position: sticky; top: 0; }.

Giải pháp của tôi là một chút dài dòng, nhưng nó xử lý định vị thay đổi từ cạnh trái cho bố cục trung tâm.

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

Đây là một phiên bản nữa để thử cho những người có vấn đề với những người khác. Nó kết hợp các kỹ thuật được thảo luận trong câu hỏi trùng lặp này và tạo ra các DIV trợ giúp cần thiết một cách linh hoạt để không cần thêm HTML.

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

Để làm cho một yếu tố dính, làm:

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

Khi phần tử trở nên dính, mã quản lý vị trí của nội dung còn lại để giữ cho nó không nhảy vào khoảng trống do phần tử dính còn lại. Nó cũng trả lại phần tử dính về vị trí không dính ban đầu của nó khi cuộn trở lại phía trên nó.

Đây là một phiên bản mở rộng cho câu trả lời của Josh Lee. Nếu bạn muốn div nằm trên thanh bên bên phải và nổi trong một phạm vi (nghĩa là bạn cần chỉ định vị trí neo trên cùng và dưới cùng). Nó cũng sửa một lỗi khi bạn xem cái này trên thiết bị di động (bạn cần kiểm tra vị trí cuộn bên trái nếu không div sẽ di chuyển khỏi màn hình).

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

Tôi đã gặp điều này khi tìm kiếm điều tương tự. Tôi biết đó là một câu hỏi cũ nhưng tôi nghĩ tôi sẽ đưa ra một câu trả lời gần đây hơn.

Scrollorama có một tính năng 'pin it', đó chính là thứ tôi đang tìm kiếm.

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

Thông tin được cung cấp để trả lời câu hỏi khác này có thể giúp ích cho bạn, Evan:

Kiểm tra xem phần tử có hiển thị sau khi cuộn không

Về cơ bản, bạn muốn sửa đổi kiểu của phần tử để đặt nó thành cố định chỉ sau khi đã xác minh rằng giá trị document.body.scrollTop bằng hoặc lớn hơn đỉnh của phần tử của bạn.

Câu trả lời được chấp nhận hoạt động nhưng không di chuyển trở lại vị trí trước nếu bạn cuộn lên trên nó. Nó luôn bị mắc kẹt trên đỉnh sau khi được đặt ở đó.

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

Phản hồi của jleedev sẽ hoạt động tốt, nhưng tôi không thể làm cho nó hoạt động được. Trang ví dụ của anh ấy cũng không hoạt động (đối với tôi).

Bạn có thể thêm 3 hàng bổ sung để khi người dùng cuộn trở lại đầu trang, div sẽ dính vào vị trí cũ của nó:

Đây là mã:

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

Tôi có thiết lập liên kết trong một div vì vậy nó là một danh sách dọc của các liên kết chữ và số.

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

Sau đó, tôi thiết lập chức năng jQuery tiện dụng này để lưu vị trí đã tải và sau đó thay đổi vị trí thành cố định khi cuộn ngoài vị trí đó.

LƯU Ý: điều này chỉ hoạt động nếu các liên kết hiển thị khi tải trang !!

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

Tôi đã sử dụng một số công việc ở trên để tạo ra công nghệ này. Tôi đã cải thiện nó một chút và nghĩ rằng tôi sẽ chia sẻ công việc của mình. Hi vọng điêu nay co ich.

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

Đây là một chút năng động hơn của một cách để làm cuộn. Nó cần một số công việc và một lúc nào đó tôi sẽ biến nó thành một phích cắm nhưng đây là những gì tôi nghĩ ra sau giờ làm việc.

Trong javascript bạn có thể làm:

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

Không phải là một giải pháp chính xác mà là một sự thay thế tuyệt vời để xem xét

CSS này CHỈ Top thanh cuộn màn hình . Đã giải quyết tất cả các vấn đề với CHỈ CSS , KHÔNG JavaScript, KHÔNG JQuery, Không có bộ não hoạt động ( lol ).

Thưởng thức fiddle của tôi : D tất cả các mã được bao gồm trong đó :)

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

Đặt nội dung đủ dài để bạn có thể thấy hiệu ứng ở đây :) Ồ, và tài liệu tham khảo cũng ở đó, vì thực tế anh ấy xứng đáng với tín dụng của mình

CSS CHỈ Top thanh cuộn màn hình

Dưới đây là một ví dụ sử dụng plugin jquery-thấy: 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 (bao gồm plugin jquery-thấy):

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

dính cho đến khi chân trang chạm vào 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);