ページの読み込み時にスクロールジャンプの位置を固定する要素

Question

私はブートストラップでブログページを作成しています。ページの右端の3分の1は、ページ上部から300ピクセルをスクロールすると固定されるカテゴリリストと検索バーの列です。これはうまく機能しているようですが、ページが最初に読み込まれるときに、明らかに理由がないためにサイド要素がページの先頭にジャンプするという問題があります。私は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"); 
    } 
}); 

はさらに参照のためのCSS

.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; 
} 

であり、あなたはそれが固定位置決幅作るshould'tようcol-md-4 AS

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

Answer 1

HTMLのdivタグの入れ子は、フロートを残しています。

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