화면을지나 아래로 스크롤하면 div가 화면 상단에 달라 붙게 함

화면을지나 아래로 스크롤하면 div가 화면 상단에 달라 붙게 함

---

이 질문에 이미 답변이 있습니다.

• div를 스크롤 한 후 화면 상단에 고정하려면 어떻게해야합니까? 21 답변

내 페이지가 처음로드 될 때 상단에서 약 100px 인 div가 있습니다 (페이지에 대한 일부 버튼 등을 보유 함).

사용자가 스크롤을 지나갈 때 div가 화면 상단에 연결된다는 점에서 사용자를 "따라 가기"를 원합니다. 사용자가 페이지 상단으로 돌아 오면 원래 위치로 돌아가고 싶습니다.

Visualization - xxxxx is the div:

Default (page load)          User vertically scrolled well past it
---------                    ---------
|       |                    |xxxxxxx| < after div reaches top of screen when
|xxxxxxx|                    |       |   page is scrolled vertically, it stays
|       |                    |       |   there
---------                    ---------

---

요령은 위치 : 고정으로 설정해야하지만 사용자가 스크롤 한 후에 만 ​​설정해야한다는 것입니다.

이것은 window.scroll 이벤트에 핸들러를 첨부하여 이와 같은 방식으로 수행됩니다.

   // Cache selectors outside callback for performance. 
   var $window = $(window),
       $stickyEl = $('#the-sticky-div'),
       elTop = $stickyEl.offset().top;

   $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    });

이것은 단순히 sticky페이지가 스크롤되었을 때 CSS 클래스 를 추가하고 백업 될 때 클래스를 제거합니다.

CSS 클래스는 다음과 같습니다.

  #the-sticky-div.sticky {
     position: fixed;
     top: 0;
  }

편집-이제 더 빠르게 jQuery 객체를 캐시하도록 수정 된 코드.

---

깜박임없이 무한대의 대답이 작동하도록하는 비결은 다른 div에 스크롤 검사를 한 다음 수정하려는 div에 두는 것입니다.

viixii.com 코드에서 파생 된 코드 는 다음과 같습니다.

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top)
        $('#sticky-element').addClass('sticky');
    else
        $('#sticky-element').removeClass('sticky');
}

$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

이런 식으로 함수는 고정 앵커에 도달 한 후에 만 ​​호출되므로 모든 스크롤 이벤트에서 '.sticky'클래스를 제거하고 추가하지 않습니다.

이제 sticky-anchor가 맨 위에 도달하면 sticky 클래스를 추가하고 sticky-anchor가보기로 돌아 오면이를 제거합니다.

고정하려는 요소 바로 위에 앵커 역할을하는 클래스가있는 빈 div를 배치하면됩니다.

이렇게 :

<div id="sticky-anchor"></div>
<div id="sticky-element">Your sticky content</div>

All credit for the code goes to viixii.com

---

You should try the waypoints jQuery plugin.

http://imakewebthings.com/waypoints/shortcuts/sticky-elements/

I think it does exactly what you want, and with no flicker. From memory, though, I don't think it worked well in Mobile Safari (YMMV).

A good example of this was on New York Times recently:

http://www.nytimes.com/interactive/2010/11/13/weekinreview/deficits-graphic.html

The box graphic in the page doesn't scroll off the top of the page.

---

There was a previous question today (no answers) that gave a good example of this functionality. You can check the relevant source code for specifics (search for "toolbar"), but basically they use a combination of webdestroya's solution and a bit of JavaScript:

1. Page loads and element is position: static
2. On scroll, the position is measured, and if the element is position: static and it's off the page then the element is flipped to position: fixed.

I'd recommend checking the aforementioned source code though, because they do handle some "gotchas" that you might not immediately think of, such as adjusting scroll position when clicking on anchor links.

---

I created a jQuery plugin for this. Would love to get some feedback as it is my first one. https://github.com/dubroe/sticky-div

---

Use position:fixed; and set the top:0;left:0;right:0;height:100px; and you should be able to have it "stick" to the top of the page.

<div style="position:fixed;top:0;left:0;right:0;height:100px;">Some buttons</div>

참고URL : https://stackoverflow.com/questions/2907367/have-a-div-cling-to-top-of-screen-if-scrolled-down-past-it