복붙노트

[JQUERY] 특정 지점에서 스크롤 위치를 고정 중지?

JQUERY

특정 지점에서 스크롤 위치를 고정 중지?

해결법

  1. 1.여기에 내가 그냥 당신이 필요로 무엇을 할 수 쓴 플러그인 빠른 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);

    예를 들어 작업보기 →

  2. 2.당신은 종류의이 같은 의미합니까?

    당신은 종류의이 같은 의미합니까?

    http://jsfiddle.net/b43hj/

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

    $ (창) .scroll (함수 () { $ ( "#이 theFixed") CSS ( "최고", Math.max (0, 100 - $ (이) .scrollTop ())).; }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> SOMETHING

    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF < BR> 다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF < BR> 다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF < BR> 다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF
    STUFF < BR> 다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도
    다도

  3. 3.여기에이 문제를 해결합니다 플러그인 완벽한 JQuery와는 다음과 같습니다

    여기에이 문제를 해결합니다 플러그인 완벽한 JQuery와는 다음과 같습니다

    https://github.com/bigspotteddog/ScrollToFixed

    다음과 같이이 플러그인의 설명입니다 :

    요소가 수직으로보기 밖으로 스크롤했을 경우이 플러그인은 페이지 상단에 수정 요소로 사용된다; 그러나, 왼쪽 또는 오른쪽으로 가로 스크롤로 이동 계속해서 요소를 허용한다.

    옵션 marginTop 주어진 요소는 수직 상방으로 수직 스크롤 목표 위치에 도달 한 후에 이동을 중지한다; 페이지가 왼쪽 또는 오른쪽으로 스크롤로하지만, 요소는 여전히 수평으로 이동합니다. 페이지가 목표 위치 과거 다시 아래로 스크롤되면, 요소는 페이지의 원래 위치에 복원됩니다.

    이 플러그인은 파이어 폭스 3/4에서 구글 크롬 10/11, 사파리 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 });
});

  4. 4.당신은 제임스 몬타는 그의 대답에 자신의 코드와 함께 한 일을 할 수 있지만 그게 (V19에서 테스트) 크롬에서 깜박 할 것입니다.

    당신은 제임스 몬타는 그의 대답에 자신의 코드와 함께 한 일을 할 수 있지만 그게 (V19에서 테스트) 크롬에서 깜박 할 것입니다.

    당신은 해결할 수 대신 "최고"의 "여백 - 가기"를 세우면 그. 이 마진 토와 함께 작동 이유를 정말 알고하지 마십시오.

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

    http://jsbin.com/idacel

  5. 5.가능한 CSS 유일한 해결책은 위치에 달성 될 수있다 : 끈적;

    가능한 CSS 유일한 해결책은 위치에 달성 될 수있다 : 끈적;

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

    여기 예입니다 : https://jsfiddle.net/0vcoa43L/7/

  6. 6.내 솔루션

    내 솔루션

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

  7. 7.프로젝트에서 실제로 페이지로드시 화면 하단에 고정 몇 가지 제목이 (제목이 넓은 뷰포트 캔버스 요소에 최대 공간을 제공하기 위해 하단에 그래서는 그리기 응용 프로그램입니다).

    프로젝트에서 실제로 페이지로드시 화면 하단에 고정 몇 가지 제목이 (제목이 넓은 뷰포트 캔버스 요소에 최대 공간을 제공하기 위해 하단에 그래서는 그리기 응용 프로그램입니다).

    나는 그것이 스크롤에 바닥 글에 도달 할 때 내가 바닥 글을 통해 제목을 원하지 않기 때문에, '절대'가되기 위해 제목을 필요로 (색을 향하고 바닥 글의 배경 색상과 동일).

    나는 (Gearge 밀로에 의해 편집) 여기에서 가장 오래된 응답 내 사용 사례에 근무 스 니펫을 그 코드를했다. 나는 주위에 약간의 연주와 함께이 작업을 얻었다. 이 바닥 글에 도달하면 이제 고정 제목 아름답게 바닥 글 위에 앉아있다.

    그냥 내가 내 사용 사례를 공유하고자 그것은 어떻게 작동하는지, 그리고 감사의 말씀! 응용 : 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);
    }

  8. 8.나는이 기능을 기능을 갖춘이에 대한 블로그 포스트를 작성했습니다 :

    나는이 기능을 기능을 갖춘이에 대한 블로그 포스트를 작성했습니다 :

    $.fn.myFixture = function (settings) {
  return this.each(function () {

    // default css declaration 
    var elem = $(this).css('position', 'fixed');

    var setPosition = function () {         
      var top = 0;
      // get no of pixels hidden above the the window     
      var scrollTop = $(window).scrollTop();    
      // get elements distance from top of window
      var topBuffer = ((settings.topBoundary || 0) - scrollTop);
      // update position if required
      if (topBuffer >= 0) { top += topBuffer }
      elem.css('top', top);      
    };

    $(window).bind('scroll', setPosition);
    setPosition();
  });
};

  9. 9.Mootools의 프레임 워크를 사용하는 솔루션.

    Mootools의 프레임 워크를 사용하는 솔루션.

    http://mootools.net/docs/more/Fx/Fx.Scroll

    도움이 되었기를 바랍니다 !! :디

  10. 10.나는이 솔루션을 좋아

    나는이 솔루션을 좋아

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

    내 문제는 내가 어도비 뮤즈의 위치를 ​​기준으로 컨테이너를 처리해야한다고했다.

    내 솔루션 :

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

  11. 11.그냥 mVChr 코드를 즉석에서

    그냥 mVChr 코드를 즉석에서

    $(".sidebar").css('position', 'fixed')

    var windw = this;

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

        $window.scroll(function(e) {
            if ($window.scrollTop() > pos) {
                topPos = pos + $($this).height();
                $this.css({
                    position: 'absolute',
                    top: topPos
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 250 //set your value
                });
            }
        });
    };

    var height = $("body").height() - $("#footer").height() ;
    $('.sidebar').followTo(height);
    $('.sidebar').scrollTo($('html').offset().top);

  12. 12.나는 mVchr의 대답 @ 적응 끈적 광고 위치에 사용할 그것을 거꾸로 : 당신이 절대적으로 다음 헤더 정크 화면 꺼질 때까지 (스크롤) 위치하지만, 필요로하는 경우가 그 후 화면에 / 볼 fixied를 유지해야합니다

    나는 mVchr의 대답 @ 적응 끈적 광고 위치에 사용할 그것을 거꾸로 : 당신이 절대적으로 다음 헤더 정크 화면 꺼질 때까지 (스크롤) 위치하지만, 필요로하는 경우가 그 후 화면에 / 볼 fixied를 유지해야합니다

    $.fn.followTo = function (pos) {
    var stickyAd = $(this),
    theWindow = $(window);
    $(window).scroll(function (e) {
      if ($(window).scrollTop() > pos) {
        stickyAd.css({'position': 'fixed','top': '0'});
      } else {
        stickyAd.css({'position': 'absolute','top': pos});
      }
    });
  };
  $('#sticky-ad').followTo(740);

    CSS :

    #sticky-ad {
    float: left;
    display: block;
    position: absolute;
    top: 740px;
    left: -664px;
    margin-left: 50%;
    z-index: 9999;
}

  13. 13.내가 @ 제임스 대답을 사랑하지만 그 반대 즉 정지 고정 된 위치 직전 바닥 글을 찾고 있었다, 여기에 내가 생각 해낸 것입니다

    내가 @ 제임스 대답을 사랑하지만 그 반대 즉 정지 고정 된 위치 직전 바닥 글을 찾고 있었다, 여기에 내가 생각 해낸 것입니다

    var $fixed_element = $(".some_element")
if($fixed_element.length){
        var $offset = $(".footer").position().top,
            $wh = $(window).innerHeight(),
            $diff = $offset - $wh,
            $scrolled = $(window).scrollTop();
        $fixed_element.css("bottom", Math.max(0, $scrolled-$diff));
    }

    이제 고정 요소는 바로 바닥 글 전에 중지 것이다. 오버랩 그것으로하지 않습니다.

    14. from https://stackoverflow.com/questions/5902822/stopping-fixed-position-scrolling-at-a-certain-point by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 사용하여 링크에 클릭을 유발하는 방법  (0) 2020.10.14
[JQUERY] 자바 스크립트에서 길게 누름?  (0) 2020.10.14
[JQUERY] 번호 세 자리마다에 쉼표를 추가  (0) 2020.10.14
[JQUERY] 런타임에 jQuery를 가진 CSS 규칙 / 클래스 만들기  (0) 2020.10.14
[JQUERY] 800 픽셀을 한 후 스크롤 아래에 DIV보기  (0) 2020.10.14
,

티스토리툴바