페이지로드시 스크롤 위치를 고정하는 요소가

Question

부트 스트랩이있는 블로그 페이지를 만들고 있습니다. 페이지의 오른쪽 세 번째는 페이지 상단에서 300px 스크롤 할 때 고정되는 카테고리 목록 및 검색 막대가있는 열입니다. 이것은 잘 작동하는 것처럼 보이지만 문제점은 페이지가 처음로드 될 때 측면 요소가 명백한 이유없이 페이지의 맨 위로 이동한다는 것입니다. 내 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 그리고 col-md-4 AS

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

Answer 1

는 부동 소수점 왼쪽 된 HTML의 div의의 중첩, 그래서 당신은 고정 배치하기 위해서만 확인 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