[jquery] 특정 지점에서 고정 위치 스크롤링을 중지 하시겠습니까?

Program / 글쓴이

위치 : 고정 된 요소가 있으므로 원하는 방식으로 페이지를 스크롤합니다. 사용자가 위로 스크롤 할 때 요소가 특정 지점 (예 : 페이지 상단에서 250px)에서 스크롤을 중지하기를 원합니다. 이것이 가능합니까? 도움이나 조언이 도움이 될 것입니다.

그렇게하려면 jquery를 사용해야한다는 느낌이 들었습니다. 사용자가있는 위치의 스크롤링이나 위치를 확인했지만 정말 혼란 스러웠습니다. jquery 솔루션이 있습니까?

답변

다음은 필요한 작업을 수행 할 수있는 빠른 jQuery 플러그인입니다.

$.fn.followTo = function (pos) {
    var $this = this,
        $window = $(window);

    $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('#yourDiv').followTo(250);

작동 예보기 →

답변

이런 말인가요?

http://jsfiddle.net/b43hj/

$(window).scroll(function(){
    $("#theFixed").css("top", Math.max(0, 250 - $(this).scrollTop()));
});

코드 스 니펫 표시

답변

다음은이 문제를 해결하는 완전한 jquery 플러그인입니다.

https://github.com/bigspotteddog/ScrollToFixed

이 플러그인에 대한 설명은 다음과 같습니다.

이 플러그인은 요소가보기에서 세로로 스크롤 된 경우 페이지 상단에 요소를 고정하는 데 사용됩니다. 그러나 가로 스크롤을 사용하여 요소가 계속 왼쪽 또는 오른쪽으로 이동할 수 있습니다.

marginTop 옵션이 주어지면 수직 스크롤이 목표 위치에 도달하면 요소가 수직 위로 이동을 중지합니다. 그러나 페이지가 왼쪽 또는 오른쪽으로 스크롤 될 때 요소는 여전히 수평으로 이동합니다. 페이지가 대상 위치를지나 아래로 스크롤되면 요소가 페이지의 원래 위치로 복원됩니다.

이 플러그인은 Firefox 3/4, Google Chrome 10/11, Safari 5 및 Internet Explorer 8/9에서 테스트되었습니다.

특정 경우에 대한 사용법 :

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed({ marginTop: 250 });
});

답변

James Montagne가 그의 답변에서 자신의 코드로 한 일을 할 수 있지만 Chrome에서 깜박입니다 (V19에서 테스트 됨).

“top”대신 “margin-top”을 입력하면 문제를 해결할 수 있습니다. 왜 그것이 margin tho와 함께 작동하는지 정말로 모릅니다.

$(window).scroll(function(){
    $("#theFixed").css("margin-top",Math.max(-250,0-$(this).scrollTop()));
});

http://jsbin.com/idacel

답변

가능한 CSS 전용 솔루션은 다음을 통해 달성 할 수 있습니다.position: sticky;

브라우저 지원은 실제로 정말 좋습니다 :
https://caniuse.com/#search=position%3A%20sticky

다음은 예입니다 :
https://jsfiddle.net/0vcoa43L/7/

답변

내 솔루션 

$(window).scroll(function(){
        if($(this).scrollTop()>425) {
            $("#theRelative").css("margin-top",$(this).scrollTop()-425);
            }   else {
                $("#theRelative").css("margin-top",$(this).scrollTop()-0);
                }
            });
            });

답변

프로젝트에서 실제로 페이지로드시 화면 하단에 일부 제목이 고정되어 있습니다 (드로잉 앱이므로 제목은 넓은 뷰포트에서 캔버스 요소에 최대 공간을 제공하기 위해 하단에 있음).

머리글이 바닥 글 위에 표시되는 것을 원하지 않기 때문에 스크롤의 바닥 글에 도달 할 때 제목이 ‘절대’가 될 필요가있었습니다 (머리글 색상은 바닥 글 배경색과 동일 함).

여기에서 가장 오래된 응답 (Gearge Millo 편집)을 가져 왔고 그 코드 조각이 내 사용 사례에 적합했습니다. 약간의 놀면서 나는 이것을 작동시켰다. 이제 고정 된 머리글이 바닥 글에 도달하면 바닥 글 위에 아름답게 배치됩니다.

내 사용 사례와 작동 방식을 공유하고 감사하다고 말하고 싶습니다! 앱 : http://joefalconer.com/web_projects/drawingapp/index.html

    /* CSS */
    @media screen and (min-width: 1100px) {
        #heading {
            height: 80px;
            width: 100%;
            position: absolute;  /* heading is 'absolute' on page load. DOESN'T WORK if I have this on 'fixed' */
            bottom: 0;
        }
    }

    // jQuery
    // Stop the fixed heading from scrolling over the footer
    $.fn.followTo = function (pos) {
      var $this = this,
      $window = $(window);

      $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
          $this.css( { position: 'absolute', bottom: '-180px' } );
        } else {
          $this.css( { position: 'fixed', bottom: '0' } );
        }
      });
    };
    // This behaviour is only needed for wide view ports
    if ( $('#heading').css("position") === "absolute" ) {
      $('#heading').followTo(180);
    }