스크롤시 요소의 위치를 ​​변경하는 jQuery 코드

Question

공유 및 소셜 아이콘이 포함 된 막대가 있습니다. 이 막대는 다음과 같이 게시물 제목 아래에 배치됩니다.

<div class="post" id="post-<?php the_ID(); ?>"> 

      <div class="title"> 
       <h1><?php the_title(); ?></h1> 
      </div> 

      <div class="sharelinks"> 
       <ul> 
        <li><a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="horizontal">Tweet</a></li> 
        <li><div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false" data-layout="button_count" data-show-faces="false" data-font="arial"></div></li> 
        <li><g:plusone size="medium" href="<?php the_permalink(); ?>/"></g:plusone></li> 
        <li><a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo urlencode(sofa_image_src('full')); ?>&description=<?php echo urlencode(get_the_title($post->ID)); ?>" class="pin-it-button" count-layout="horizontal">Pin It</a></li> 
        <li><su:badge layout="1"></su:badge></li> 
       </ul> 
      </div> 
</div> 

그건 내 html입니다. 그리고 "sharelinks"내 CSS는 다음과 같습니다

.sharelinks { 
    padding: 10px 20px; 
    background: #f1f1f1; 
    box-shadow: 0 1px #fff inset, 0 -1px #fff inset; 
    border-bottom: 1px solid #ddd; 
    position: relative; 
} 

내가 달성하고자하는 무엇? - 사용자가 범위를 넘어서 스크롤하고 항상 페이지 상단 (고정 위치)에 놓았을 때 sharelinks div의 위치를 ​​변경하고 사용자가 그 위치까지 뒤로 스크롤 할 때 기본 위치로 되돌리려합니다. 사용자가 스크롤하면 "넘어"스크롤하지 않는 한 막대가 페이지의 맨 위에 고정되어 나타나는 한 막대를 만드는 방법입니다.

HEADER에 대해 완벽하게 작동하는 유사한 코드가 있지만이 요소에는 동일한 코드가 작동하지 않습니다. 내 머리글이 페이지 맨 위에 있기 때문에 생각합니다.

나는 도움이나 아이디어가 필요하다. 나는 그 효과를 만드는 법을 배웠다.

// fixed navigation 
var yOffset = $("#header").offset().top; 
$(window).scroll(function() { 
    if ($(window).scrollTop() > yOffset) { 
     $("#header").css({ 
      'top': 0, 
      'position': 'fixed' 
     }); 
    } else { 
     $("#header").css({ 
      'top': yOffset + 'px', 
      'position': 'absolute' 
     }); 
    } 
}); 

Answer 1

다음은 고정 된 솔루션입니다. :)

스크롤링 위치를 가져 오는 것으로 시작하여 스크롤이 특정 값 (맨 위부터 요소 시작까지의 거리)을 넘으면 요소의 CSS를 고정으로 변경하고 요소의 CSS를 기본값으로 되돌립니다.

var sOffset = $(".sharelinks").offset().top; 
var shareheight = $(".sharelinks").height() + 43; 
$(window).scroll(function() { 
    var scrollYpos = $(document).scrollTop(); 
    if (scrollYpos > sOffset - shareheight) { 
     $(".sharelinks").css({ 
      'top': '61px', 
      'position': 'fixed' 
     }); 
    } else { 
     $(".sharelinks").css({ 
      'top': 'auto', 
      'position': 'relative' 
     }); 
    } 
}); 

Answer 2

사용 position:sticky 그것을 확인합니다.

다음은 설명 된 기사입니다.

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

과 일을 옛날 방식이 정확하게 당신이 찾고있는 것 같습니다 demo

sticky position demo