jQuery : css 위치를 사용하지 않고 onScroll 요소 스틱을 만들 수 있습니까?

또는 다른 사람이이 작업을 수행 할 수있는 방법을 알려줄 수 있습니까 (플러그인을 사용하지 않고)jQuery : css 위치를 사용하지 않고 onScroll 요소 스틱을 만들 수 있습니까?

왼쪽에는 왼쪽 탐색 메뉴가 있고 오른쪽에는 내용이 있습니다. 두 요소는 왼쪽으로 떠있었습니다.

페이지 상단으로부터 125px로 내려 가면 사이드 스케이드를 '스틱'으로 설정하고 페이지 아래로 한 번 스크롤합니다.

나는 가깝다고 느낀다. 그러나 나는 아직 확실히 거기에 없다! 필자가 작성한 코드를 사용하면 올바른 창 위치로 스크롤 한 다음 사이드 막대가 '막대기'를 원하는 위치로 되돌아 가면 사이드 탐색이 창 위쪽으로 '점프'됩니다.

다른 문제는 일단 .stick 클래스가 적용되면 요소는 문서 흐름에서 꺼내집니다 (고정 위치를 적용하고 있기 때문에) .content가 왼쪽으로 이동하여 가져옵니다. 그것의 장소. 여기

는 codepen입니다 : http://codepen.io/MandyMadeThis/pen/DLtsJ

** 참고 : 나는 스크롤에 창 상단에 '점프'사이드 탐색을 다시 만들 수없는 것, 그래서 그 모든에 대해 무엇을하지 않습니다 , 그러나 나는 여전히 왼쪽으로 이동하는 내용없이이 작업을 수행하는 올바른 방법을 알고 싶습니다. **

누구든지 올바른 방향으로 나를 안내 할 수 있다면 멋질 것입니다. 고맙습니다. 내 jQuery를

.side-nav { 
    float: left; 
    position: relative; 
    top: -17px; 
    width: 23%; 
    margin-right: 2%; 
} 

.content { 
    width: 70%; 
    float: left; 
} 

.stick { 
    position:fixed; 
    top:0px; 
    margin-top: 125px; 
}

그리고 여기에 있습니다 : : 여기

<body> 
<nav>navigation content</nav> 
<header>header content</header> 
<div class="container clearfix"> 
    <div class="side-nav">THIS IS THE THING I WANT TO STICK</div> 
    <div class="content">This needs to stay to the right of the .side-nav</div> 
</body>

는 CSS입니다 : 여기

내 인하입니다

var sn = $(".side-nav"); 
var pos = sn.position(); 
$(window).scroll(function() { 
    var windowPos = $(window).scrollTop(); 
    if (windowPos >= pos.top - 125) { 
     sn.addClass("stick"); 
    } else { 
     sn.removeClass("stick"); 
    } 
});

출처

2014-07-16 MandyMadeThis

이 문제를 해결하려면, 당신은 단순히를 추가해야 margin-left ~ .content 및 float을 삭제하십시오. 이 방법은 콘텐츠의 위치가 nav에 의존하지 않습니다.

.content { 
    width: 70%; 
    margin-left: 25%; 
}

http://codepen.io/anon/pen/jbCix

출처

2014-07-16 22:56:20 imtheman

OH의 MAN! 나는 그것이 단지 보지 않고 있었던 것은 매우 단순한 무엇인가이다라는 것을 알고 있었다! 고마워요 – MandyMadeThis

문제 없습니다. 다행히 도울 수있어. – imtheman

jQuery : css 위치를 사용하지 않고 onScroll 요소 스틱을 만들 수 있습니까?

답변

관련 문제