해당 div로 스크롤 한 후 div를 수정하는 방법은 무엇입니까?

해당 div로 스크롤 한 후 div를 수정하는 방법은 무엇입니까?

---

div스크롤 후 남은 고정 을 만드는 방법 은 div무엇입니까? 나는이 div페이지에 나중에입니다 그리고 당신은에 도착 스크롤해야합니다 div.

내가 사용하는 경우 :

.divname {
  position: fixed;
}

은 div정상적으로 나타납니다 전에 나타납니다. 내가 필요한 것의 좋은 예는 9gag의 두 번째 광고 일 것 입니다. 화면 해상도가 충분히 낮 으면 첫 페이지를로드 한 후 해당 광고가 표시되지 않지만 아래로 스크롤하면 두 번째 광고가 표시되고 아래로 스크롤하는 동안 고정 된 상태로 유지됩니다.

---

나는 이것이 html / css로만 태그된다는 것을 알고 있지만 CSS만으로는 할 수 없습니다. 가장 쉬운 방법은 jQuery를 사용하는 것입니다.

var fixmeTop = $('.fixme').offset().top;       // get initial position of the element

$(window).scroll(function() {                  // assign scroll event listener

    var currentScroll = $(window).scrollTop(); // get current position

    if (currentScroll >= fixmeTop) {           // apply position: fixed if you
        $('.fixme').css({                      // scroll to that element or below it
            position: 'fixed',
            top: '0',
            left: '0'
        });
    } else {                                   // apply position: static
        $('.fixme').css({                      // if you scroll above it
            position: 'static'
        });
    }

});

http://jsfiddle.net/5n5MA/2/

---

이것은 CSS3로 가능합니다. 여기에position: sticky 표시된대로 사용 하십시오 .

position: -webkit-sticky; /* Safari & IE */
position: sticky;
top: 0;

---

jquery 함수가 가장 중요합니다.

<script>
$(function(){
    var stickyHeaderTop = $('#stickytypeheader').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#stickytypeheader').css({position: 'fixed', top: '0px'});
                    $('#sticky').css('display', 'block');
            } else {
                    $('#stickytypeheader').css({position: 'static', top: '0px'});
                    $('#sticky').css('display', 'none');
            }
    });
});
</script>

그런 다음 JQuery Lib를 사용하십시오.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

이제 HTML 사용

<div id="header">
    <p>This text is non sticky</p>
    <p>This text is non sticky</p>
    <p>This text is non sticky</p>
    <p>This text is non sticky</p>
 </div>

<div id="stickytypeheader">
 <table width="100%">
  <tr>
    <td><a href="http://growthpages.com/">Growth pages</a></td>

    <td><a href="http://google.com/">Google</a></td>

    <td><a href="http://yahoo.com/">Yahoo</a></td>

    <td><a href="http://www.bing.com/">Bing</a></td>

    <td><a href="#">Visitor</a></td>
  </tr>
 </table>
</div>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>

여기에서 데모 확인

---

그것은 나를 위해 일했다

$(document).scroll(function() {
    var y = $(document).scrollTop(), //get page y value 
        header = $("#myarea"); // your div id
    if(y >= 400)  {
        header.css({position: "fixed", "top" : "0", "left" : "0"});
    } else {
        header.css("position", "static");
    }
});

---

<script>
if($(window).width() >= 1200){
    (function($) {
        var element = $('.to_move_content'),
            originalY = element.offset().top;

        // Space between element and top of screen (when scrolling)
        var topMargin = 10;

        // Should probably be set in CSS; but here just for emphasis
        element.css('position', 'relative');

        $(window).on('scroll', function(event) {
            var scrollTop = $(window).scrollTop();

            element.stop(false, false).animate({
                top: scrollTop < originalY
                    ? 0
                    : scrollTop - originalY + topMargin
            }, 0);
        });
    })(jQuery);
}

이 시도 ! div에 class .to_move_content를 추가하십시오.

참조 URL : https://stackoverflow.com/questions/15850271/how-to-make-div-fixed-after-you-scroll-to-that-div