修復頁面加載位置的元素在頁面加載時跳出位置

Question

我使用bootstrap製作博客頁面。頁面的右側三分之一是一個列表，其中包含一個類別列表和搜索欄，當您從頁面頂部滾動300px時，該列將被固定。這似乎運作良好，但問題是，頁面第一次加載時，side元素跳轉到頁面的頂部沒有明顯的原因。我認爲我的JS代碼有問題。

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
    var objectSelect = $("#wrapnews"); 
    var objectPosition = objectSelect.offset().top; 
    if (scroll > 300) { 
    $(".col-md-4").addClass("fix-sidebar"); 
    } else { 
    $(".col-md-4").removeClass("fix-sidebar"); 
    } 
}); 

下面是進一步參考

.fix-sidebar { 
    position: fixed !important; 
    top: 180px; 
    right: 30px; 
    width: 360px; 
} 

.sidenote { 
text-align: center; 
display: block; 
background-color: #ccc; 
color: #fff; 
border: 2px solid #000; 
border-radius: 2px; 
width: 360px; 
} 

的CSS和HTML的div

<div class="col-md-4 fix-sidebar" id="wrapnews"> 
    <div class="sidenote"> 
    </div> 
    </div> 

Answer 1

AS col-md-4留下浮動的嵌套，所以你should't使其現在的位置固定。

而且由於您將position:fixed添加到.fix-sidebar，所以您應該刪除right: 30px;。

var objectSelect = $("#wrapnews"), objectPosition = objectSelect.offset().top; 
 
    $(window).scroll(function() { 
 
     var scroll = $(window).scrollTop(); 
 
     if (scroll > objectPosition) { 
 
      objectSelect.addClass("fix-sidebar"); 
 
     } else { 
 
      objectSelect.removeClass("fix-sidebar"); 
 
     } 
 
    });

@import url('//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css'); 
 

 
body { 
 
     height: 2000px; 
 
    } 
 

 
    .wrapnews { 
 
     position: relative; 
 
     top: 180px; 
 
    } 
 

 
    .fix-sidebar { 
 
     position: fixed !important; 
 
     top: 0; 
 
    } 
 

 
    .sidenote { 
 
     text-align: center; 
 
     display: block; 
 
     background-color: #ccc; 
 
     color: #fff; 
 
     border: 2px solid #000; 
 
     border-radius: 2px; 
 
     width: 360px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="col-md-8" style="background: red;height: 1000px"> 
 
     content 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="wrapnews" id="wrapnews"> 
 
      <div class="sidenote">sidenote 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
     

你可以看到一個在線演示HERE