포함 된 끈적한 사이드 바

사용자가 페이지를 스크롤 할 때 고정 위치 인 으로 유지되는 사이드 바가 필요합니다. 나는 여러 가지 해결책을 찾았고 모두 너무 복잡하고 복잡하거나 너무 길다. 나는 그것을 간단하고 효율적으로 필요로한다. 나는 노력이 만든 :포함 된 끈적한 사이드 바

var length = $('#container').height() - $('#stick').offset().top - parseFloat($('#stick').css('marginTop').replace(/auto/, 0)); $(window).scroll(function() { var scroll = $(this).scrollTop(); if (scroll < $('#container').offset().top) { $('#stick').removeAttr("style"); } else if (scroll > length) { $('#stick').css('position', 'absolute'); } else { $('#stick').css({"position":"fixed", "top":"0", "right":"0"}); } });

나는 Remy Sharp screencast의 도움과 waypointarts blog post

#container는 뷰포트의 끝에 얻는 #stick 스크롤 중지와 함께이 만든을 (이하 "고정"위치 제거), 문제는 그것이 사라지고 그 위치에서 절대 위치를 유지하지 못한다는 것이며,이 동작은 사용자를 혼란스럽게합니다.

#stick 사이드 바가 사라지지 않고 #container의 맨 아래에 절대적으로 배치되도록하려면 어떻게해야합니까? 또한 내 코드가 완벽해질 수 있다고 생각하십니까?

나는
감사합니다 ... 아마추어 해요 그래서 여기에 실수를 많이 찾을 지금 JQuery와에게 한 달 사용하기 시작.

출처

2014-10-16 b0t_

충분한 브라우저가 지원되면 ['position : sticky'] (https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning) – Oriol

와우를 사용할 수 있습니다. 너무 굉장해. 나는이 직책이 가능할 지 몰랐다. 그것을 가리켜 주셔서 감사합니다. 현재 단단한 옵션이 아닙니다. http://caniuse.com/#search=sticky –

나는 그것을 할 수 있었다. 나는 왜 그것이 desapearing인지 모르겠다. 그러나 html에 css 속성을 직접 삽입하지 않기로 결정했다. 그리고 css에 더 apropriate 접근법을 사용했다. html 언어를 사용하기 때문에 실제 CSS 파일에 CSS를 적용했다.

그래서이 생각으로 나는 CSS 클래스에 jquery 액션을 추가했고 CSS에는 내가 원하는 클래스 스타일을 추가했으며 모든 것이 완벽하게 작동합니다. 어쩌면 지금은 더 나은 접근 방식을 가지고 있으며 형식이 더 좋습니다.

그래서, HTML :

<body> 
    <header>The header</header> 
    <main id="container"> 
    <article id="content">Main content</article> 
    <section id="sticky">Sticking content</section> 
    </main> 
    <footer>The footer</footer> 
<body>

JQuery와 :

var $container = $('#container'); 
var $sticky = $('#sticky'); 
var length  = $container.height() + $container.offset().top - $sticky.height(); 

$(window).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y < $container.offset().top) { $sticky.removeClass('sticky-fixed sticky-bottom'); } 
    else if (y > length) { $sticky.attr('class','sticky sticky-bottom'); } 
    else { $sticky.attr('class','sticky sticky-fixed'); } 
});

는 CSS :

#sticky { 
    width: 260px; 
    position: absolute; 
    right: 0; 
    top: 128px; 
    } 

#sticky-fixed { 
    position: fixed; 
    right: 0; 
    top: 128px; 
    } 

#sticky-bottom { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    top: auto; 
    }

이 무엇을 :

페이지가 맨 위에 있으면 #sticky는 "절대 위치"를 가지며, 사용자가 페이지를 스크롤하기 시작할 때 "위치 고정"(항상 내용의 측면에서 볼 수 있음)과 시점이 바닥에 도달 할 때 메인 콘텐트가있는 #container의 끈적한 부분이 멈 춥니 다.

이 접근법의 가장 큰 장점은 "섹션 고정"이 "바닥 글"또는 다른 HTML 요소와 겹치지 않는다는 것입니다. # 콘테이너의 끝에서 멈추고 사용자가 페이지를 스크롤 할 때마다 "고정 된"위치가 있으므로 사용자가 시점을 따라 흐트러 뜨리지 않습니다.

내가 할 수있는 최선이며, 내가 발견 한 다른 전체 스크립트보다 훨씬 쉽고 가볍게 보입니다. 오류가 있거나 추가로 업데이트 할 수 있다면 개선하고 알려주십시오.

jquery 파트가 완료되었으므로 다른 사람들을 위해 쉽게 적응할 수 있어야합니다. CSS 파일 속성을 원하는대로 변경해야합니다.

출처

2014-10-17 00:46:44

답변

관련 문제