복붙노트

[JQUERY] 이에 스크롤 된 후에는 어떻게 화면 상단에 사업부 스틱을 만들 수 있습니까?

JQUERY

이에 스크롤 된 후에는 어떻게 화면 상단에 사업부 스틱을 만들 수 있습니까?

해결법

  1. 1.당신은 고정대로 요소를 배치, 단순히 CSS를 사용할 수 있습니다 :

    당신은 고정대로 요소를 배치, 단순히 CSS를 사용할 수 있습니다 :

    .fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

    편집 : 오프셋 스크롤 요소에 도달 한 후에는 절대 위치를 가진 요소를 가져야 그것이 고정으로 변경되어야하고, 최상위의 위치가 0으로 설정되어야한다.

    당신은 scrollTop 기능으로 문서의 오프셋 (offset) 상단의 스크롤을 감지 할 수 있습니다 :

    $(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

    스크롤 (200)에 도달 할 때 고정 오프셋으로 배치되어 있기 때문에, 소자는 브라우저 윈도우의 상단에 부착된다.

  2. 2.당신은 스택 오버플로의 편집 페이지에서이 구글 코드의 문제 페이지의 예와 (최근) 보았다.

    당신은 스택 오버플로의 편집 페이지에서이 구글 코드의 문제 페이지의 예와 (최근) 보았다.

    백업 스크롤 할 때 CMS의 대답은 위치를 되 돌리지 않습니다. 여기에 스택 오버플로에서 뻔뻔하게 도난 코드는 다음과 같습니다

    function moveScroller() {
    var $anchor = $("#scroller-anchor");
    var $scroller = $('#scroller');

    var move = function() {
        var st = $(window).scrollTop();
        var ot = $anchor.offset().top;
        if(st > ot) {
            $scroller.css({
                position: "fixed",
                top: "0px"
            });
        } else {
            $scroller.css({
                position: "relative",
                top: ""
            });
        }
    };
    $(window).scroll(move);
    move();
}

    <div id="sidebar" style="width:270px;"> 
  <div id="scroller-anchor"></div> 
  <div id="scroller" style="margin-top:10px; width:270px"> 
    Scroller Scroller Scroller
  </div>
</div>

<script type="text/javascript"> 
  $(function() {
    moveScroller();
  });
</script>

    그리고 간단한 라이브 데모.

    끈적 끈적한, 크롬, 파이어 폭스, 사파리에서 지원됩니다 : 어렸을 때, 스크립트 무료 대안은 위치입니다. HTML5ROCKS 및 데모, 모질라 문서에 문서를 참조하십시오.

  3. 3.CSS의 점착성 : 1 월 2017 크롬 56의 출시로, 일반적으로 사용되는 대부분의 브라우저는 위치를 지원합니다.

    CSS의 점착성 : 1 월 2017 크롬 56의 출시로, 일반적으로 사용되는 대부분의 브라우저는 위치를 지원합니다.

    #thing_to_stick {
  position: sticky;
  top: 0px;
}

    파이어 폭스와 크롬에서 나를 위해 트릭을 수행합니다.

    -webkit-끈적 : 사파리에서 여전히 사용 위치에 있어야합니다.

    Polyfills Internet Explorer와 에지 사용할 수 있습니다; https://github.com/wilddeer/stickyfill 좋은 하나가 될 것으로 보인다.

  4. 4.난 당신과 같은 문제를 겪고 있으며 돌봐의 플러그인 jQuery를 만들기까지했다. 실제로 사람들이 여기에 나열된 모든 문제를 해결 플러스 너무 옵션 기능의 몇 가지를 추가합니다.

    난 당신과 같은 문제를 겪고 있으며 돌봐의 플러그인 jQuery를 만들기까지했다. 실제로 사람들이 여기에 나열된 모든 문제를 해결 플러스 너무 옵션 기능의 몇 가지를 추가합니다.

    stickyPanelSettings = {
    // Use this to set the top margin of the detached panel.
    topPadding: 0,

    // This class is applied when the panel detaches.
    afterDetachCSSClass: "",

    // When set to true the space where the panel was is kept open.
    savePanelSpace: false,

    // Event fires when panel is detached
    // function(detachedPanel, panelSpacer){....}
    onDetached: null,

    // Event fires when panel is reattached
    // function(detachedPanel){....}
    onReAttached: null,

    // Set this using any valid jquery selector to 
    // set the parent of the sticky panel.
    // If set to null then the window object will be used.
    parentSelector: null
};

    https://github.com/donnyv/sticky-panel

    데모 : http://htmlpreview.github.io/?https://github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm

  5. 5.그리고 여기 JQuery와하지 않고 방법 (UPDATE : 당신이 CSS로 이렇게 지금 할 수있는 다른 답변을 참조 전용)

    그리고 여기 JQuery와하지 않고 방법 (UPDATE : 당신이 CSS로 이렇게 지금 할 수있는 다른 답변을 참조 전용)

    VAR startProductBarPos = -1; window.onscroll = 함수 () { VAR 바 = document.getElementById를 ( '탐색'); 경우 (startProductBarPos <0) = startProductBarPos findPosY (바); 경우 (pageYOffset> startProductBarPos) { bar.style.position는 = '고정'; bar.style.top = 0; }그밖에{ bar.style.position = '상대'; } }; 함수 findPosY (OBJ) { VAR의 curtop = 0; 경우 (대해서 typeof (obj.offsetParent)! = '정의되지 않은'&& obj.offsetParent) { 반면 (obj.offsetParent) { curtop + = obj.offsetTop; OBJ = obj.offsetParent; } curtop + = obj.offsetTop; } 다른 경우 (obj.y) curtop + = obj.y; curtop를 반환; } * {여백 : 0; 패딩 : 0;} .nav { 국경 : 1 픽셀의 빨간색 점선; 배경 : # 00FFFF; 텍스트 정렬 : 센터; 패딩 : 21px 0; 여백 : 0 자동; Z- 색인 : 10; 폭 : 100 %; 왼쪽 : 0; 오른쪽 : 0; } .헤더 { 텍스트 정렬 : 센터; 패딩 : 65px 0; 국경 : 1 픽셀의 빨간색 점선; } .content { 패딩 : 500 픽셀 0; 텍스트 정렬 : 센터; 국경 : 1 픽셀의 빨간색 점선; } .footer { 패딩 : 100 픽셀 0; 텍스트 정렬 : 센터; 배경 : # 777; 국경 : 1 픽셀의 빨간색 점선; } <헤더 클래스 = "헤더"> 이것은 헤더 입니다

    주요 탐색
    안녕하세요! <바닥 글 클래스 = "바닥 글"> 이것은 바닥 글 입니다

  6. 6.내가 jQuery로 그것을 어떻게 때문입니다. 이 모든 스택 오버 플로우에 대한 다양한 답변에서 함께 자갈길했다. 이 솔루션은 빠른 성능을 위해 선택기를 캐시하고 끈끈한 DIV 끈적가되면 "점프"문제를 해결합니다.

    내가 jQuery로 그것을 어떻게 때문입니다. 이 모든 스택 오버 플로우에 대한 다양한 답변에서 함께 자갈길했다. 이 솔루션은 빠른 성능을 위해 선택기를 캐시하고 끈끈한 DIV 끈적가되면 "점프"문제를 해결합니다.

    jsfiddle에 체크 아웃 : http://jsfiddle.net/HQS8s/

    CSS :

    .stick {
    position: fixed;
    top: 0;
}

    JS :

    $(document).ready(function() {
    // Cache selectors for faster performance.
    var $window = $(window),
        $mainMenuBar = $('#mainMenuBar'),
        $mainMenuBarAnchor = $('#mainMenuBarAnchor');

    // Run this on scroll events.
    $window.scroll(function() {
        var window_top = $window.scrollTop();
        var div_top = $mainMenuBarAnchor.offset().top;
        if (window_top > div_top) {
            // Make the div sticky.
            $mainMenuBar.addClass('stick');
            $mainMenuBarAnchor.height($mainMenuBar.height());
        }
        else {
            // Unstick the div.
            $mainMenuBar.removeClass('stick');
            $mainMenuBarAnchor.height(0);
        }
    });
});

  7. 7.여기에 또 다른 옵션은 다음과 같습니다

    여기에 또 다른 옵션은 다음과 같습니다

    JAVASCRIPT

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

    귀하의 #myElementToStick 위치로 시작해야합니다 절대 CSS 속성을.

  8. 8.조쉬 리와 콜린 't 하트 말했듯이, 선택적 단지 위치 사용할 수 있습니다 끈적; 최고 : 0; 당신의 스크롤을 원하는 사업부에 적용되는 ...

    조쉬 리와 콜린 't 하트 말했듯이, 선택적 단지 위치 사용할 수 있습니다 끈적; 최고 : 0; 당신의 스크롤을 원하는 사업부에 적용되는 ...

    게다가, 유일한 것은 당신은 그것을 외부 CSS 시트에 맞게 페이지 또는 형식의 상단에이를 복사해야 할 것 :

    <style>
#sticky_div's_name_here { position: sticky; top: 0; }
</style>

    그냥 사업부의 이름으로 #의 sticky_div's_name_here를 교체하여 사업부는

    당신은 # 예제 {위치에 둘 것 즉 인 경우 : 끈적; 최고 : 0; }.

  9. 9.용액 내 조금 상세이지만 중심 레이아웃을 위해 좌단 위치 변수를 처리한다.

    용액 내 조금 상세이지만 중심 레이아웃을 위해 좌단 위치 변수를 처리한다.

    // Ensurs that a element (usually a div) stays on the screen
//   aElementToStick   = The jQuery selector for the element to keep visible
global.makeSticky = function (aElementToStick) {
    var $elementToStick = $(aElementToStick);
    var top = $elementToStick.offset().top;
    var origPosition = $elementToStick.css('position');

    function positionFloater(a$Win) {
        // Set the original position to allow the browser to adjust the horizontal position
        $elementToStick.css('position', origPosition);

        // Test how far down the page is scrolled
        var scrollTop = a$Win.scrollTop();
        // If the page is scrolled passed the top of the element make it stick to the top of the screen
        if (top < scrollTop) {
            // Get the horizontal position
            var left = $elementToStick.offset().left;
            // Set the positioning as fixed to hold it's position
            $elementToStick.css('position', 'fixed');
            // Reuse the horizontal positioning
            $elementToStick.css('left', left);
            // Hold the element at the top of the screen
            $elementToStick.css('top', 0);
        }
    }

    // Perform initial positioning
    positionFloater($(window));

    // Reposition when the window resizes
    $(window).resize(function (e) {
        positionFloater($(this));
    });

    // Reposition when the window scrolls
    $(window).scroll(function (e) {
        positionFloater($(this));
    });
};

  10. 10.여기에 다른 사람들과 가진 자 문제를 시도하는 또 하나의 버전입니다. 그것은 함께이 중복 질문에서 논의 된 기술을 끌어와 필요한 도우미 div를 동적 그래서 별도의 HTML이 필요 생성하지 않습니다.

    여기에 다른 사람들과 가진 자 문제를 시도하는 또 하나의 버전입니다. 그것은 함께이 중복 질문에서 논의 된 기술을 끌어와 필요한 도우미 div를 동적 그래서 별도의 HTML이 필요 생성하지 않습니다.

    CSS :

    .sticky { position:fixed; top:0; }

    JQuery와 :

    function make_sticky(id) {
    var e = $(id);
    var w = $(window);
    $('<div/>').insertBefore(id);
    $('<div/>').hide().css('height',e.outerHeight()).insertAfter(id);
    var n = e.next();
    var p = e.prev();
    function sticky_relocate() {
      var window_top = w.scrollTop();
      var div_top = p.offset().top;
      if (window_top > div_top) {
        e.addClass('sticky');
        n.show();
      } else {
        e.removeClass('sticky');
        n.hide();
      }
    }
    w.scroll(sticky_relocate);
    sticky_relocate();
}

    , 요소 끈적하려면 수행

    make_sticky('#sticky-elem-id');

    요소가 끈적하게되면, 코드는 끈적 요소에 의해 왼쪽의 틈에 점프에서 그것을 유지하기 위해 나머지 내용의 위치를 ​​관리합니다. 그 위에 다시 스크롤 할 때 그것은 또한 원래의 끈적 위치로 끈적 요소를 반환합니다.

  11. 11.여기 조쉬 리의 대답에 확장 된 버전입니다. 이 사업부는 오른쪽 사이드 바에서, 그리고 범위 내에서 부동하려는 경우 (즉, 당신은 상단과 하단 앵커 위치를 지정해야합니다). 그것은 또한 당신이 모바일 장치 (당신이 그렇지 않으면 DIV 화면을 이동합니다 왼쪽 스크롤 위치를 확인해야합니다)에이를 볼 수 버그를 해결합니다.

    여기 조쉬 리의 대답에 확장 된 버전입니다. 이 사업부는 오른쪽 사이드 바에서, 그리고 범위 내에서 부동하려는 경우 (즉, 당신은 상단과 하단 앵커 위치를 지정해야합니다). 그것은 또한 당신이 모바일 장치 (당신이 그렇지 않으면 DIV 화면을 이동합니다 왼쪽 스크롤 위치를 확인해야합니다)에이를 볼 수 버그를 해결합니다.

    function moveScroller() {
    var move = function() {
        var st = $(window).scrollTop();
        var sl = $(window).scrollLeft();
        var ot = $("#scroller-anchor-top").offset().top;
        var ol = $("#scroller-anchor-top").offset().left;
        var bt = $("#scroller-anchor-bottom").offset().top;
        var s = $("#scroller");
        if(st > ot) {
            if (st < bt - 280) //280px is the approx. height for the sticky div
            {
                s.css({
                    position: "fixed",
                    top: "0px",
                    left: ol-sl
                }); 
            }
            else
            {
                s.css({
                    position: "fixed",
                    top: bt-st-280,
                    left: ol-sl
                }); 
            }
        } else {
            s.css({
                position: "relative",
                top: "",
                left: ""
            });

        }
    };
    $(window).scroll(move);
    move();
}

  12. 12.아니 정확한 솔루션 만 고려하는 훌륭한 대안

    아니 정확한 솔루션 만 고려하는 훌륭한 대안

    이 CSS 화면 스크롤 막대의 상단. 만 CSS로 모든 문제를 해결, NO 자바 스크립트, NO JQuery와, 노브레 인 작업 (웃음).

    내 바이올린을 즐길 : D 모든 코드가 거기에 포함되어 있습니다 :

    CSS

    #menu {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #a1cb2f;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
}

.w {
    width: 900px;
    margin: 0 auto;
    margin-bottom: 40px;
}<br type="_moz">

    충분히 당신이 여기에 효과를 볼 수 있도록 내용을 넣어 :) 아, 그리고 참고는 그가 자신의 신용을받을 자격이 사실을뿐만 아니라 거기에있다

    화면 스크롤 막대의 CSS 만 최고

  13. 13.같은 일을 검색 할 때 나는이 가로 질러왔다. 나는 오래된 질문 알지만 내가 더 최근의 답을 제공하는 것이라고 생각합니다.

    같은 일을 검색 할 때 나는이 가로 질러왔다. 나는 오래된 질문 알지만 내가 더 최근의 답을 제공하는 것이라고 생각합니다.

    Scrollorama는 내가 찾던되는 단지 어떤 '핀 그것을'기능이 있습니다.

    http://johnpolacek.github.io/scrollorama/

  14. 14.이 다른 질문에 대한 답을 제공하는 정보는, 에반에 도움이 될 수 있습니다 :

    이 다른 질문에 대한 답을 제공하는 정보는, 에반에 도움이 될 수 있습니다 :

    요소가 스크롤 한 후 볼 수 있는지 확인

    당신은 기본적으로 단지 document.body.scrollTop 값이 동일하거나 요소의 상단보다 큰 것을 확인 한 후 고정으로 설정하는 요소의 스타일을 수정하고 싶습니다.

  15. 15.허용 대답은 작동하지만 당신이 그 위에 이동하면 이전 위치로 다시 이동하지 않습니다. 그것은 항상 거기에 배치 된 후 상단에 붙어있다.

    허용 대답은 작동하지만 당신이 그 위에 이동하면 이전 위치로 다시 이동하지 않습니다. 그것은 항상 거기에 배치 된 후 상단에 붙어있다.

      $(window).scroll(function(e) {
    $el = $('.fixedElement');
    if ($(this).scrollTop() > 42 && $el.css('position') != 'fixed') {
      $('.fixedElement').css( 'position': 'fixed', 'top': '0px');

    } else if ($(this).scrollTop() < 42 && $el.css('position') != 'relative') {
      $('.fixedElement').css( 'relative': 'fixed', 'top': '42px');
//this was just my previous position/formating
    }
  });

    jleedev의 반응 whould 일, 그러나 나는 일에 그것을 얻을 수 없습니다. 그의 예제 페이지는 (나를 위해) 작동하지 않았다.

  16. 16.가기 사용자 스크롤 다시는 사업부가 된 장소에 충실 할 때, 그래서 당신은 3 개 여분의 행을 추가 할 수 있습니다 :

    가기 사용자 스크롤 다시는 사업부가 된 장소에 충실 할 때, 그래서 당신은 3 개 여분의 행을 추가 할 수 있습니다 :

    여기에 코드입니다 :

    if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
    $('.fixedElement').css({'position': 'relative', 'top': '200px'});
}

  17. 17.이 문자와 숫자 링크의 수직 목록입니다 그래서 내가 사업부의 링크 설정을 가지고있다.

    이 문자와 숫자 링크의 수직 목록입니다 그래서 내가 사업부의 링크 설정을 가지고있다.

    #links {
    float:left;
    font-size:9pt;
    margin-left:0.5em;
    margin-right:1em;
    position:fixed;
    text-align:center;
    width:0.8em;
}

    나는 그 설정이 편리한 jQuery를 기능은로드 된 위치를 저장하고 그 위치를 넘어 스크롤 할 때 다음 고정으로 위치를 변경합니다.

    참고 : 링크 페이지로드에서 볼 수있을 경우에만 작동합니다!

  18. 18.당신이 할 수있는 자바 스크립트에서 :

    당신이 할 수있는 자바 스크립트에서 :

    var element = document.getElementById("myid");
element.style.position = "fixed";
element.style.top = "0%";

  19. 19.http://jsfiddle.net/711p4em4/ : 여기에 사용 JQuery와 - 가시 플러그인 그 예입니다.

    http://jsfiddle.net/711p4em4/ : 여기에 사용 JQuery와 - 가시 플러그인 그 예입니다.

    HTML :

    <div class = "wrapper">
    <header>Header</header>
    <main>
        <nav>Stick to top</nav>
        Content
    </main>
    <footer>Footer</footer>
</div>

    CSS :

    * {
    margin: 0;
    padding: 0;
}

body {
    background-color: #e2e2e2;
}

.wrapper > header,
.wrapper > footer {
    font: 20px/2 Sans-Serif;
    text-align: center;
    background-color: #0040FF;
    color: #fff;
}

.wrapper > main {
    position: relative;
    height: 500px;
    background-color: #5e5e5e;
    font: 20px/500px Sans-Serif;
    color: #fff;
    text-align: center;
    padding-top: 40px;
}

.wrapper > main > nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font: 20px/2 Sans-Serif;
    color: #fff;
    text-align: center;
    background-color: #FFBF00;
}

.wrapper > main > nav.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

    JS는 (가시 JQuery와 플러그인을 포함)

    (function($){

    /**
     * Copyright 2012, Digital Fusion
     * Licensed under the MIT license.
     * http://teamdf.com/jquery-plugins/license/
     *
     * @author Sam Sehnert
     * @desc A small plugin that checks whether elements are within
     *       the user visible viewport of a web browser.
     *       only accounts for vertical position, not horizontal.
     */
    var $w = $(window);
    $.fn.visible = function(partial,hidden,direction){

        if (this.length < 1)
            return;

        var $t        = this.length > 1 ? this.eq(0) : this,
            t         = $t.get(0),
            vpWidth   = $w.width(),
            vpHeight  = $w.height(),
            direction = (direction) ? direction : 'both',
            clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;

        if (typeof t.getBoundingClientRect === 'function'){

            // Use this native browser method, if available.
            var rec = t.getBoundingClientRect(),
                tViz = rec.top    >= 0 && rec.top    <  vpHeight,
                bViz = rec.bottom >  0 && rec.bottom <= vpHeight,
                lViz = rec.left   >= 0 && rec.left   <  vpWidth,
                rViz = rec.right  >  0 && rec.right  <= vpWidth,
                vVisible   = partial ? tViz || bViz : tViz && bViz,
                hVisible   = partial ? lViz || rViz : lViz && rViz;

            if(direction === 'both')
                return clientSize && vVisible && hVisible;
            else if(direction === 'vertical')
                return clientSize && vVisible;
            else if(direction === 'horizontal')
                return clientSize && hVisible;
        } else {

            var viewTop         = $w.scrollTop(),
                viewBottom      = viewTop + vpHeight,
                viewLeft        = $w.scrollLeft(),
                viewRight       = viewLeft + vpWidth,
                offset          = $t.offset(),
                _top            = offset.top,
                _bottom         = _top + $t.height(),
                _left           = offset.left,
                _right          = _left + $t.width(),
                compareTop      = partial === true ? _bottom : _top,
                compareBottom   = partial === true ? _top : _bottom,
                compareLeft     = partial === true ? _right : _left,
                compareRight    = partial === true ? _left : _right;

            if(direction === 'both')
                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
            else if(direction === 'vertical')
                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
            else if(direction === 'horizontal')
                return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
        }
    };

})(jQuery);

$(function() {
    $(window).scroll(function() {
        $(".wrapper > header").visible(true) ?
            $(".wrapper > main > nav").removeClass("fixed") :
            $(".wrapper > main > nav").addClass("fixed");
    });
});

  20. 20.나는이 기술을 만들 수 위의 작품의 일부를 사용했다. 나는 그것을 조금 개선 나는 내 작품을 공유하는 것이라고 생각. 도움이 되었기를 바랍니다.

    나는이 기술을 만들 수 위의 작품의 일부를 사용했다. 나는 그것을 조금 개선 나는 내 작품을 공유하는 것이라고 생각. 도움이 되었기를 바랍니다.

    jsfiddle 코드

    function scrollErrorMessageToTop() {
    var flash_error = jQuery('#flash_error');
    var flash_position = flash_error.position();

    function lockErrorMessageToTop() {
        var place_holder = jQuery("#place_holder");
        if (jQuery(this).scrollTop() > flash_position.top && flash_error.attr("position") != "fixed") {
            flash_error.css({
                'position': 'fixed',
                'top': "0px",
                "width": flash_error.width(),
                "z-index": "1"
            });
            place_holder.css("display", "");
        } else {
            flash_error.css('position', '');
            place_holder.css("display", "none");
        }

    }
    if (flash_error.length > 0) {
        lockErrorMessageToTop();

        jQuery("#flash_error").after(jQuery("<div id='place_holder'>"));
        var place_holder = jQuery("#place_holder");
        place_holder.css({
            "height": flash_error.height(),
            "display": "none"
        });
        jQuery(window).scroll(function(e) {
            lockErrorMessageToTop();
        });
    }
}
scrollErrorMessageToTop();​

    이 스크롤을 할 수있는 방법의 좀 더 동적입니다. 그것은 몇 가지 작업을 필요로 하는가와 내가 어떤 점에서 pluging이 점을 설정하지만,하지만 이것은 내가 작업 시간 후에 해낸 것입니다.

  21. 21.바닥 글까지 끈적는 사업부 안타 :

    바닥 글까지 끈적는 사업부 안타 :

    function stickyCostSummary() {
    var stickySummary = $('.sticky-cost-summary');
    var scrollCostSummaryDivPosition = $(window).scrollTop();
    var footerHeight = $('#footer').height();
    var documentHeight = $(document).height();
    var costSummaryHeight = stickySummary.height();
    var headerHeight = 83;
    var footerMargin = 10;
    var scrollHeight = 252;
    var footerPosition = $('#footer').offset().top;

    if (scrollCostSummaryDivPosition > scrollHeight && scrollCostSummaryDivPosition <= (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) {
        stickySummary.removeAttr('style');
        stickySummary.addClass('fixed');

    } else if (scrollCostSummaryDivPosition > (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) {
        stickySummary.removeClass('fixed');
        stickySummary.css({
          "position" : "absolute",
          "top" : (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin - scrollHeight) + "px"
      });
    } else {
        stickySummary.removeClass('fixed');
        stickySummary.css({
            "position" : "absolute",
            "top" : "0"
        });
    }
}

$window.scroll(stickyCostSummary);

    22. from https://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 비활성화 / 버튼을 제출 가능  (0) 2020.09.30
[JQUERY] 내가 jQuery로 요소에 바인딩 이벤트를 찾을 수 있습니까?  (0) 2020.09.30
[JQUERY] 그것은 beforeunload 팝업에서 사용자 정의 메시지를 표시 할 수 있습니까?  (0) 2020.09.30
[JQUERY] 형식 오류 : '정의되지 않은이'( ') $ (문서'를 평가) 함수 아니다  (0) 2020.09.30
[JQUERY] 배경 이미지가로드되었는지 어떻게 확인할 수 있나요?  (0) 2020.09.30
,

티스토리툴바