Element, das Position auf Scroll-Jumps beim Laden der Seite verschoben wird

Question

Ich mache eine Blog-Seite mit Bootstrap. Das rechte Drittel der Seite ist eine Spalte mit einer Kategorieliste und Suchleiste, die beim Scrollen von 300px vom oberen Rand der Seite fixiert wird. Dies scheint gut zu funktionieren, aber das Problem ist, dass beim ersten Laden der Seite das Seitenelement ohne ersichtlichen Grund an den Anfang der Seite springt. Ich nehme an, dass etwas mit meinem JS-Code nicht stimmt.

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

Hier ist die CSS für weitere Referenz

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

Und die Verschachtelung der HTML divs

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

Answer 1

AS col-md-4 Schwimmer gelassen wird, so dass Sie should't es fest machen Positon .

Und weil Sie position:fixed zu .fix-sidebar hinzufügen, sollten Sie also right: 30px; entfernen.

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> 
 
     

Sie können viel das Problem dadurch gelöst, um eine Online-Demo HERE