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 속성입니다.

으로 조쉬 리 와 하트 t 콜린 '이 말했다, 당신은 선택적으로 만 사용할 수 있습니다 position: sticky; top: 0;당신의 스크롤을 원하는 사업부에 적용되는 ...

또한, 페이지 상단에 복사하거나 외부 CSS 시트에 맞게 형식을 지정하면됩니다.

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

그냥 교체 #sticky_div's_name_here하여 DIV했다 경우 사업부의 이름으로, 즉 <div id="example">당신이 둘 것입니다 #example { position: sticky; top: 0; }.

내 솔루션은 조금 장황하지만 중앙 레이아웃의 왼쪽 가장자리에서 가변 위치를 처리합니다.

// 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));
    });
};

다른 사람들과 문제가있는 사람들을 위해 시도 할 수있는 또 다른 버전이 있습니다. 이 중복 질문 에서 논의 된 기술을 결합하고 필요한 도우미 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');

요소가 끈적 거리면 코드는 나머지 내용의 위치를 ​​관리하여 끈적 끈적한 요소가 남긴 간격으로 뛰어 들지 않도록합니다. 또한 스티커 요소를 다시 스크롤하면 스티커 요소를 원래의 스티커가 아닌 위치로 되돌립니다.

Josh Lee의 답변에 대한 확장 버전입니다. 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();
}

같은 것을 검색 할 때이 문제가 발생했습니다. 나는 그것이 오래된 질문이라는 것을 알고 있지만 더 최근의 답변을 제공 할 것이라고 생각했습니다.

Scrollorama에는 내가 찾던 바로 'pin it'기능이 있습니다.

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

이 다른 질문에 대답하기 위해 제공된 정보는 Evan에게 도움이 될 수 있습니다.

스크롤 후 요소가 보이는지 확인하십시오.

기본적으로 document.body.scrollTop 값이 요소의 상단 이상인지 확인한 후에 만 ​​요소의 스타일을 수정하여 고정으로 설정하려고합니다.

허용 된 답변은 작동하지만 위에서 스크롤하면 이전 위치로 돌아 가지 않습니다. 거기에 놓인 후에는 항상 상단에 붙어 있습니다.

  $(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의 응답은 작동했지만 작동하지 못했습니다. 그의 예제 페이지도 작동하지 않았습니다 (나를 위해).

3 행을 추가하여 사용자가 맨 위로 스크롤하면 div가 이전 위치에 고정됩니다.

코드는 다음과 같습니다.

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

div에 링크가 설정되어있어 문자 및 숫자 링크의 세로 목록입니다.

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

그런 다음이 편리한 jQuery 함수를 설정하여로드 된 위치를 저장하고 해당 위치를 넘어 스크롤 할 때 위치를 고정으로 변경합니다.

참고 : 이것은 페이지로드시 링크가 보이는 경우에만 작동합니다 !!

var listposition=false;
jQuery(function(){
     try{
        ///// stick the list links to top of page when scrolling
        listposition = jQuery('#links').css({'position': 'static', 'top': '0px'}).position();
        console.log(listposition);
        $(window).scroll(function(e){
            $top = $(this).scrollTop();
            $el = jQuery('#links');
            //if(typeof(console)!='undefined'){
            //    console.log(listposition.top,$top);
            //}
            if ($top > listposition.top && $el.css('position') != 'fixed'){
                $el.css({'position': 'fixed', 'top': '0px'});
            }
            else if ($top < listposition.top && $el.css('position') == 'fixed'){
                $el.css({'position': 'static'});
            }
        });

    } catch(e) {
        alert('Please vendor admin@mydomain.com (Myvendor JavaScript Issue)');
    }
});

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

jsfuddle 코드

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();​

이것은 스크롤을 수행하는 방법의 약간 더 역동적입니다. 그것은 약간의 작업이 필요하며 어느 시점에서 이것을 플러그로 바꿀 것입니다. 그러나 이것은 몇 시간의 작업 후에 생각해 낸 것입니다.

자바 스크립트에서는 다음을 수행 할 수 있습니다.

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

정확한 해결책은 아니지만 고려해야 할 훌륭한 대안

이 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 만 화면 상단 스크롤 막대

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

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-visible 플러그인 포함) :

(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");
    });
});

바닥 글이 div에 도달 할 때까지 끈적임 :

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);