亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

當一個div被滾動到屏幕頂部時,我如何才能將它固定在屏幕頂部呢?

當一個div被滾動到屏幕頂部時,我如何才能將它固定在屏幕頂部呢?

當一個div被滾動到屏幕頂部時,我如何才能將它固定在屏幕頂部呢?我想要創建一個div,它位于一個內容塊下面,但是一旦頁面被滾動到足以與其頂部邊界聯系起來,就會固定在適當的位置,并與頁面一起滾動。
查看完整描述

3 回答

?
泛舟湖上清波郎朗

TA貢獻1818條經驗 獲得超3個贊

您可以簡單地使用css,將元素定位為固定:

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

編輯:您應該擁有絕對位置的元素,一旦滾動偏移量到達元素,它應該被更改為固定的,頂部位置應該設置為零。

控件可以檢測文檔的頂部滾動偏移量。滾動頂職能:

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

當滾動偏移量達到200時,元素將棍子到瀏覽器窗口的頂部,因為是以固定的方式放置的。


查看完整回答
反對 回復 2019-06-29
?
猛跑小豬

TA貢獻1858條經驗 獲得超8個贊

你已經在Google代碼上看到了這個例子問題頁以及(直到最近)堆棧溢出的編輯頁面。

CMS的答案不會在你向上滾動時恢復定位。下面是堆棧溢出中無恥的被盜代碼:

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>

一個簡單的現場演示.

一個新的、沒有腳本的替代方案是position: sticky,它在Chrome、Firefox和Safari中得到了支持。見關于HTML 5巖石的文章演示,和Mozilla博士.


查看完整回答
反對 回復 2019-06-29
  • 3 回答
  • 0 關注
  • 2180 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號