[javascript] div가 스크롤되면 화면 상단에 div 스틱을 어떻게 만들 수 있습니까?

콘텐츠 블록 아래에있는 div를 만들고 싶지만 페이지가 상단 경계에 닿을 정도로 충분히 스크롤되면 고정되어 페이지와 함께 스크롤됩니다.

답변

CSS를 사용하여 요소를 고정 된 위치에 배치 할 수 있습니다 .

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

편집 : 위치 절대 값을 가진 요소가 있어야합니다. 스크롤 오프셋이 요소에 도달하면 고정으로 변경되고 상단 위치는 0으로 설정되어야합니다.

scrollTop 함수 를 사용하여 문서의 상단 스크롤 오프셋을 감지 할 수 있습니다 .

$(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)에 도달 할 때 오프셋, 소자는 것이다 붙어 고정으로 배치되어 있기 때문에, 브라우저 윈도우의 상단.

답변

이 예제는 Google Code의 이슈 페이지 와 Stack Overflow의 편집 페이지에서 최근 에 볼 수 있습니다.

다시 스크롤 할 때 CMS의 답변이 위치를 되 돌리지 않습니다. Stack Overflow에서 부끄럽게 도난당한 코드는 다음과 같습니다.

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>

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

position: stickyChrome, Firefox 및 Safari에서 지원되는 초기 스크립트없는 대안은 입니다. HTML5Rocks 및 데모 및 Mozilla 문서에 대한 기사를 참조하십시오 .

답변

2017 년 1 월과 Chrome 56이 출시 될 때 일반적으로 사용되는 대부분의 브라우저 position: sticky는 CSS 의 속성을 지원합니다 .

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

Firefox와 Chrome에서 나를 위해 트릭을 수행합니다.

Safari에서는 여전히을 사용해야 position: -webkit-sticky합니다.

Internet Explorer 및 Edge에 폴리 필을 사용할 수 있습니다. https://github.com/wilddeer/stickyfill 은 좋은 것 같습니다.

답변

나는 당신과 같은 문제가 있었고 그것을 처리하기 위해 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

답변

jquery가 없는 방법 은 다음과 같습니다 (업데이트 : CSS 로이 작업을 수행 할 수있는 다른 답변 참조)

var startProductBarPos=-1;
window.onscroll=function(){
  var bar = document.getElementById('nav');
  if(startProductBarPos<0)startProductBarPos=findPosY(bar);

  if(pageYOffset>startProductBarPos){
    bar.style.position='fixed';
    bar.style.top=0;
  }else{
    bar.style.position='relative';
  }

};

function findPosY(obj) {
  var curtop = 0;
  if (typeof (obj.offsetParent) != 'undefined' && obj.offsetParent) {
    while (obj.offsetParent) {
      curtop += obj.offsetTop;
      obj = obj.offsetParent;
    }
    curtop += obj.offsetTop;
  }
  else if (obj.y)
    curtop += obj.y;
  return curtop;
}

* {margin:0;padding:0;}
.nav {
  border: 1px red dashed;
  background: #00ffff;
  text-align:center;
  padding: 21px 0;

  margin: 0 auto;
  z-index:10;
  width:100%;
  left:0;
  right:0;
}

.header {
  text-align:center;
  padding: 65px 0;
  border: 1px red dashed;
}

.content {
  padding: 500px 0;
  text-align:center;
  border: 1px red dashed;
}
.footer {
  padding: 100px 0;
  text-align:center;
  background: #777;
  border: 1px red dashed;
}

<header class="header">This is a Header</header>
<div id="nav" class="nav">Main Navigation</div>
<div class="content">Hello World!</div>
<footer class="footer">This is a Footer</footer>

스 니펫 확장

답변

이것이 jquery로 어떻게했는지입니다. 이것은 스택 오버플로에 대한 다양한 답변에서 함께 모여 들었습니다. 이 솔루션은 성능 향상을 위해 선택기를 캐시하고 sticky 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);
        }
    });
});

답변

다른 옵션은 다음과 같습니다.

자바 스크립트

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시작해야 position:absoluteCSS 속성입니다.