programing

Sticky 사이드바: 아래로 스크롤할 때는 아래로, 위로 스크롤할 때는 위로 붙습니다.

starjava 2023. 9. 19. 20:41
반응형

Sticky 사이드바: 아래로 스크롤할 때는 아래로, 위로 스크롤할 때는 위로 붙습니다.

저는 제 끈적거리는 사이드바 문제에 대한 해결책을 찾고 있었습니다.저는 그것이 어떻게 작용하기를 바라는지 구체적인 생각을 가지고 있습니다; 효과적으로, 아래로 스크롤을 내릴 때 그것이 아래로 붙어있고, 뒤로 스크롤을 올리자마자 저는 그것이 위에 붙어있고, 유동적인 움직임으로(점프를 하지 않음) 싶습니다.저는 제가 이루고자 하는 것에 대한 예를 찾을 수가 없어서, 요점을 더 명확하게 보여주기를 바라는 이미지를 만들었습니다.

Sticky sidebar: stick to bottom when scrolling down, top when scrolling up

  1. 사이드바는 머리글 아래에 있습니다.
  2. 사이드바를 아래로 스크롤할 때 사이드바와 내용을 모두 스크롤할 수 있도록 페이지의 내용과 수평을 유지합니다.
  3. 사이드바 하단에 도달하면 사이드바가 뷰포트 하단에 고정됩니다(대부분의 플러그인은 상단에만 고정할 수 있고 일부 플러그인은 하단에 고정할 수 없습니다.
  4. 바닥에 닿으면 사이드바가 바닥판 위에 놓여 있습니다.
  5. 뒤로 스크롤할 때 사이드바는 컨텐츠와 수평을 유지하므로 컨텐츠와 사이드바를 다시 스크롤할 수 있습니다.
  6. 사이드바의 맨 위에 도달하면 사이드바가 뷰포트의 맨 위에 고정됩니다.
  7. 상단에 도달하면 사이드바가 머리말 아래에 다시 위치합니다.

이것으로 충분한 정보가 되었으면 좋겠습니다.플러그인/scripts을 테스트하기 위해 jsfiddle을 만들었고, 이 질문에 대해 재설정했습니다. http://jsfiddle.net/jslucas/yr9gV/2/ .

그림이 아주 좋고 그림이 잘 보이는 이미지에 +1.

오래된 질문인 것은 알지만, 우연히 포럼에서 당신이 올린 같은 질문을 발견했습니다.jquery.com 그리고 거기에 한가지 답이 있는데, 이것을 만들 좋은 도서관 하나를 제안했고 여기서 공유하고 싶었습니다.

@leafo의 스티키 키트라고 합니다.

여기 제가 준비한 아주 기본적인 예시 코드와 결과를 보기 위한 작업 데모가 있습니다.

/*!
 * Sticky-kit
 * A jQuery plugin for making smart sticky elements
 *
 * Source: http://leafo.net/sticky-kit/
 */

$(function() {
  $(".sidebar").stick_in_parent({
    offset_top: 10
  });
});
* {
  font-size: 10px;
  color: #333;
  box-sizing: border-box;
}
.wrapper,
.header,
.main,
.footer {
  padding: 10px;
  position: relative;
}
.wrapper {
  border: 1px solid #333;
  background-color: #f5f5f5;
  padding: 10px;
}
.header {
  background-color: #6289AE;
  margin-bottom: 10px;
  height: 100px;
}
.sidebar {
  position: absolute;
  padding: 10px;
  background-color: #ccc;
  height: 300px;
  width: 100px;
  float: left;
}
.main {
  background-color: #ccc;
  height: 600px;
  margin-left: 110px;
}
.footer {
  background-color: #6289AE;
  margin-top: 10px;
  height: 250px;
}
.top {
  position: absolute;
  top: 10px;
}
.bottom {
  position: absolute;
  bottom: 10px;
}
.clear {
  clear: both;
  float: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://leafo.net/sticky-kit/src/jquery.sticky-kit.js"></script>
<div class="wrapper">
  <div class="header"> <a class="top">header top</a>
    <a class="bottom">header bottom</a>

  </div>
  <div class="content">
    <div class="sidebar"> <a class="top">sidebar top</a>
      <a class="bottom">sidebar bottom</a>

    </div>
    <div class="main"> <a class="top">main top</a>
      <a class="bottom">main bottom</a>

    </div>
    <div class="clear"></div>
  </div>
  <div class="footer"> <a class="top">footer top</a>
    <a class="bottom">footer bottom</a>

  </div>
</div>

물론 모든 크레딧은 플러그인 작성자에게 전달됩니다. 여기에 보여주기 위해 이 예시를 만든 것 뿐입니다.당신이 찾던 것과 똑같은 결과를 얻어내야 합니다. 그리고 이 플러그인이 매우 유용하다는 것을 발견했습니다.

멋진 그래픽 감사합니다.저도 이 도전에 대한 해결책을 찾고 있었습니다!

유감스럽게도 여기에 게시된 다른 답변은 사이드바를 원활하게 뒤로 스크롤할 수 있는 기능을 요구하는 #5를 다루지 않습니다.

http://jsfiddle.net/bN4qu/5/ 모든 요구사항을 구현하는 fiddle을 만들었습니다.

구현해야 할 핵심 논리는 다음과 같습니다.

If scrolling up OR the element is shorter than viewport Then
  Set top of element to top of viewport If scrolled above top of element
If scrolling down then
  Set bottom of element at bottom of viewport If scrolled past bottom of element

fiddle에서 나는 CSS3 변환을 사용하여 타겟 요소를 이동하여 예를 들어 작동하지 않습니다.IE<9. 논리는 건전하지만 다른 접근법을 사용하기 위한 것입니다.

또한, 끈적거리는 사이드바에 그라데이션 배경이 들어가도록 당신의 바이올린을 수정했습니다.이를 통해 올바른 동작이 표시되고 있음을 알 수 있습니다.

이것이 누군가에게 유용하기를 바랍니다!

다음은 이를 구현하는 방법의 예입니다.

자바스크립트:

$(function() {

var $window = $(window);
var lastScrollTop = $window.scrollTop();
var wasScrollingDown = true;

var $sidebar = $("#sidebar");
if ($sidebar.length > 0) {

    var initialSidebarTop = $sidebar.position().top;

    $window.scroll(function(event) {

        var windowHeight = $window.height();
        var sidebarHeight = $sidebar.outerHeight();

        var scrollTop = $window.scrollTop();
        var scrollBottom = scrollTop + windowHeight;

        var sidebarTop = $sidebar.position().top;
        var sidebarBottom = sidebarTop + sidebarHeight;

        var heightDelta = Math.abs(windowHeight - sidebarHeight);
        var scrollDelta = lastScrollTop - scrollTop;

        var isScrollingDown = (scrollTop > lastScrollTop);
        var isWindowLarger = (windowHeight > sidebarHeight);

        if ((isWindowLarger && scrollTop > initialSidebarTop) || (!isWindowLarger && scrollTop > initialSidebarTop + heightDelta)) {
            $sidebar.addClass('fixed');
        } else if (!isScrollingDown && scrollTop <= initialSidebarTop) {
            $sidebar.removeClass('fixed');
        }

        var dragBottomDown = (sidebarBottom <= scrollBottom && isScrollingDown);
        var dragTopUp = (sidebarTop >= scrollTop && !isScrollingDown);

        if (dragBottomDown) {
            if (isWindowLarger) {
                $sidebar.css('top', 0);
            } else {
                $sidebar.css('top', -heightDelta);
            }
        } else if (dragTopUp) {
            $sidebar.css('top', 0);
        } else if ($sidebar.hasClass('fixed')) {
            var currentTop = parseInt($sidebar.css('top'), 10);

            var minTop = -heightDelta;
            var scrolledTop = currentTop + scrollDelta;

            var isPageAtBottom = (scrollTop + windowHeight >= $(document).height());
            var newTop = (isPageAtBottom) ? minTop : scrolledTop;

            $sidebar.css('top', newTop);
        }

        lastScrollTop = scrollTop;
        wasScrollingDown = isScrollingDown;
    });
}
});

CSS:

#sidebar {
  width: 180px;
  padding: 10px;
  background: red;
  float: right;
}

.fixed {
  position: fixed;
  right: 50%;
  margin-right: -50%;
}

데모: http://jsfiddle.net/ryanmaxwell/25QaE/

이는 모든 시나리오에서 예상대로 작동하며 IE에서도 잘 지원됩니다.

안토식의 Krzysztof Antosik의 투 디렉션 스티키 사이드바.

enter image description here

jQuery를 기반으로 하지 않은 경량 솔루션이 필요한 사람이 있다면 언제든지 제 코드를 확인해보세요.

스크립트를 사용하는 것은 사소한 일입니다.다 하면 됩니다.data-sticky ="true"사이드 패널의 태그에 연결합니다.

자세한 내용은 github에서 확인할 수 있습니다.깃허브의 양방향-끈적-사이드바.

또는 내 웹사이트:Dwukierunkowy 패널 boczny – Two Direction Sticky 사이드바(폴란드어만 해당)

작업 데모 시도:양방향-스티키 사이드바 데모.

/**
 * StickySidebar.js
 * A short JavaScript code that allows you to quickly and easily implement a Sticky Sidebar,
 * if the browser's viewport is too short, sidebar's contents will scroll in the direction
 * the user scrolls and sticks to either top or bottom of the screen when there's no more content. 
 * And everything with the use of pure JavaScript, 
 * thanks to which you we'll save redundant code and gain efficiency.
 * -- Krzysztof Antosik
 *
 *
 * @license The MIT License, https://github.com/Krzysztof-Antosik/Two-direction-Sticky-Sidebar/blob/main/LICENSE
 * @version 1.6
 * @author  Krzysztof Antosik, https://github.com/Krzysztof-Antosik/
 * @updated 2023-07-06
 * @link    https://github.com/Krzysztof-Antosik/Two-direction-Sticky-Sidebar/
 *
 *
 */


//Sticky element selector..
const stickyElement = document.querySelector(`[data-sticky="true"]`),

//..and other constant
startPosition = stickyElement.getBoundingClientRect().top;

//Varibles
var endScroll = window.innerHeight - stickyElement.offsetHeight - 500,
currPos = window.scrollY,
screenHeight = window.innerHeight,
stickyElementHeight = stickyElement.offsetHeight
topGap = 0,
bottomGap = 0;

//Set Gaps
setTimeout(() => {
    if (stickyElement.hasAttribute(`data-top-gap`)){
        const dataTopGap = stickyElement.getAttribute(`data-top-gap`);
        topGap = String(dataTopGap) == "auto" ? startPosition : parseInt(dataTopGap);
    }

    if (stickyElement.hasAttribute(`data-bottom-gap`)){
        bottomGap = parseInt(stickyElement.getAttribute(`data-bottom-gap`));
    }
}, 100);

//Add required style to sticky element
stickyElement.style.position = `sticky`;
stickyElement.style.top = topGap + `px`; 
stickyElement.style.height = "fit-content";

//Main function
function positionStickySidebar() {
    endScroll = window.innerHeight - stickyElement.offsetHeight - bottomGap;
    let stickyElementTop = parseInt(stickyElement.style.top.replace(`px;`, ``));
    if (stickyElementHeight+topGap+bottomGap>screenHeight) {
        if (window.scrollY < currPos) {

            //Scroll up
            if (stickyElementTop < topGap) {
                stickyElement.style.top = (stickyElementTop + currPos - window.scrollY) + `px`;
            } else if (stickyElementTop >= topGap && stickyElementTop != topGap) {
                stickyElement.style.top = topGap + `px`;
            }
        } else {

            //Scroll down
            if (stickyElementTop > endScroll) {
                stickyElement.style.top = (stickyElementTop + currPos - window.scrollY) + `px`;
            } else if (stickyElementTop < (endScroll) && stickyElementTop != endScroll) {
                stickyElement.style.top = endScroll + `px`;
            }
        }
    } else {
        stickyElement.style.top = topGap + `px`;
    }
    currPos = window.scrollY;
}
function stickyElementToMe(){
    stickyElement.style.top = topGap + `px`;
}
function updateSticky(){
    screenHeight = window.innerHeight;
    stickyElementHeight = stickyElement.offsetHeight;
    positionStickySidebar();
}
setTimeout(() => {
    //Check heights of the viewport and the sticky element on window resize and reapply positioning
    window.addEventListener(`resize`, ()=>{
        currPos = window.scrollY;
        updateSticky();
    });   
    //Follow the main function when scrolling
    document.addEventListener(`scroll`, updateSticky, {
        capture: true,
        passive: true
    }); 
}, 1000);
div {
  display: flex;
  align-items: flex-start;
}

h1 {
  margin: 0;
}

header {
  width: 100%;
  text-align: center;
  background: #1ABC9C;
}

main {
  width: 65%;
  padding: 0 5%;
  background: #95A5A6;
}

aside {
  width: 15%;
  background: #34495E;
  padding: 0 5%;
  text-align: center;
  position: sticky;
  top: 0;  
}

ul {
  list-style: none;
  padding: 0;
}

li {
  height: 40px;
}
<html>
  <body>
    <header>
      <h1>
      Two direction sticky sidebar
      </h1>
    </header>
    <div>
      <main>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas sed enim ut sem viverra. Est ultricies integer quis auctor elit sed vulputate. Metus vulputate eu scelerisque felis imperdiet. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Suscipit tellus mauris a diam maecenas sed enim. In est ante in nibh mauris cursus. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Eu scelerisque felis imperdiet proin fermentum leo vel. Libero justo laoreet sit amet cursus sit amet dictum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Nisl condimentum id venenatis a condimentum vitae. Morbi tincidunt augue interdum velit euismod.
        </p>
        <p>
        Sed enim ut sem viverra aliquet eget sit. Nisl pretium fusce id velit ut tortor pretium viverra. Ut consequat semper viverra nam libero justo laoreet sit. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. A diam sollicitudin tempor id eu nisl nunc mi. Tortor at risus viverra adipiscing at in tellus integer. Arcu non sodales neque sodales ut etiam sit amet nisl. Quisque non tellus orci ac auctor augue mauris augue. Urna neque viverra justo nec. Suspendisse ultrices gravida dictum fusce. Tempus imperdiet nulla malesuada pellentesque elit eget gravida.
        </p>
        <p>
        Non curabitur gravida arcu ac. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Cursus euismod quis viverra nibh cras pulvinar. Risus viverra adipiscing at in. Proin libero nunc consequat interdum varius. In fermentum posuere urna nec tincidunt praesent semper feugiat. Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Convallis posuere morbi leo urna. Sit amet luctus venenatis lectus. Amet nisl purus in mollis nunc sed id semper risus. Facilisi etiam dignissim diam quis enim. Massa ultricies mi quis hendrerit dolor. Id leo in vitae turpis massa sed.
        </p>
        <p>
        Lorem ipsum dolor sit amet. Tortor vitae purus faucibus ornare suspendisse sed nisi. Magnis dis parturient montes nascetur ridiculus mus. Turpis in eu mi bibendum neque. Nibh mauris cursus mattis molestie. Diam phasellus vestibulum lorem sed risus ultricies. Nulla pellentesque dignissim enim sit amet venenatis urna. Habitant morbi tristique senectus et netus et malesuada. Feugiat in fermentum posuere urna nec tincidunt praesent. Velit scelerisque in dictum non. Et pharetra pharetra massa massa.
        </p>
        <p>
        Mauris in aliquam sem fringilla ut morbi tincidunt. Non blandit massa enim nec dui nunc. Arcu dictum varius duis at consectetur lorem donec massa. Ullamcorper velit sed ullamcorper morbi tincidunt. Tortor id aliquet lectus proin nibh. Lorem donec massa sapien faucibus et. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Nibh sit amet commodo nulla facilisi nullam. Lectus nulla at volutpat diam ut venenatis tellus in metus. Blandit turpis cursus in hac habitasse platea. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Vitae nunc sed velit dignissim sodales ut eu sem integer. Suspendisse potenti nullam ac tortor. Augue eget arcu dictum varius duis at consectetur lorem donec.
        </p>
        <p>
        Sed augue lacus viverra vitae. Vestibulum rhoncus est pellentesque elit. Egestas sed sed risus pretium quam vulputate dignissim. Ante metus dictum at tempor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Donec enim diam vulputate ut pharetra sit amet. Potenti nullam ac tortor vitae purus. Lacinia quis vel eros donec ac. Fames ac turpis egestas maecenas pharetra convallis. At ultrices mi tempus imperdiet nulla malesuada. Ut ornare lectus sit amet est placerat in egestas. Ultricies leo integer malesuada nunc vel. Congue quisque egestas diam in arcu cursus euismod quis.
        </p>
        <p>
        Parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Sollicitudin ac orci phasellus egestas tellus rutrum. Libero justo laoreet sit amet cursus sit amet dictum sit. Et odio pellentesque diam volutpat commodo sed. A lacus vestibulum sed arcu non odio euismod. Eget aliquet nibh praesent tristique. Luctus accumsan tortor posuere ac ut. Condimentum vitae sapien pellentesque habitant. Tincidunt augue interdum velit euismod. Tortor condimentum lacinia quis vel eros donec ac odio tempor. Accumsan sit amet nulla facilisi morbi. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Dui faucibus in ornare quam viverra. Gravida cum sociis natoque penatibus et. Pellentesque sit amet porttitor eget dolor. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Turpis massa tincidunt dui ut ornare lectus sit.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas sed enim ut sem viverra. Est ultricies integer quis auctor elit sed vulputate. Metus vulputate eu scelerisque felis imperdiet. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Suscipit tellus mauris a diam maecenas sed enim. In est ante in nibh mauris cursus. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Eu scelerisque felis imperdiet proin fermentum leo vel. Libero justo laoreet sit amet cursus sit amet dictum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Nisl condimentum id venenatis a condimentum vitae. Morbi tincidunt augue interdum velit euismod.
        </p>
        <p>
        Sed enim ut sem viverra aliquet eget sit. Nisl pretium fusce id velit ut tortor pretium viverra. Ut consequat semper viverra nam libero justo laoreet sit. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. A diam sollicitudin tempor id eu nisl nunc mi. Tortor at risus viverra adipiscing at in tellus integer. Arcu non sodales neque sodales ut etiam sit amet nisl. Quisque non tellus orci ac auctor augue mauris augue. Urna neque viverra justo nec. Suspendisse ultrices gravida dictum fusce. Tempus imperdiet nulla malesuada pellentesque elit eget gravida.
        </p>
        <p>
        Non curabitur gravida arcu ac. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Cursus euismod quis viverra nibh cras pulvinar. Risus viverra adipiscing at in. Proin libero nunc consequat interdum varius. In fermentum posuere urna nec tincidunt praesent semper feugiat. Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Convallis posuere morbi leo urna. Sit amet luctus venenatis lectus. Amet nisl purus in mollis nunc sed id semper risus. Facilisi etiam dignissim diam quis enim. Massa ultricies mi quis hendrerit dolor. Id leo in vitae turpis massa sed.
        </p>
        <p>
        Lorem ipsum dolor sit amet. Tortor vitae purus faucibus ornare suspendisse sed nisi. Magnis dis parturient montes nascetur ridiculus mus. Turpis in eu mi bibendum neque. Nibh mauris cursus mattis molestie. Diam phasellus vestibulum lorem sed risus ultricies. Nulla pellentesque dignissim enim sit amet venenatis urna. Habitant morbi tristique senectus et netus et malesuada. Feugiat in fermentum posuere urna nec tincidunt praesent. Velit scelerisque in dictum non. Et pharetra pharetra massa massa.
        </p>
        <p>
        Mauris in aliquam sem fringilla ut morbi tincidunt. Non blandit massa enim nec dui nunc. Arcu dictum varius duis at consectetur lorem donec massa. Ullamcorper velit sed ullamcorper morbi tincidunt. Tortor id aliquet lectus proin nibh. Lorem donec massa sapien faucibus et. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Nibh sit amet commodo nulla facilisi nullam. Lectus nulla at volutpat diam ut venenatis tellus in metus. Blandit turpis cursus in hac habitasse platea. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Vitae nunc sed velit dignissim sodales ut eu sem integer. Suspendisse potenti nullam ac tortor. Augue eget arcu dictum varius duis at consectetur lorem donec.
        </p>
        <p>
        Sed augue lacus viverra vitae. Vestibulum rhoncus est pellentesque elit. Egestas sed sed risus pretium quam vulputate dignissim. Ante metus dictum at tempor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Donec enim diam vulputate ut pharetra sit amet. Potenti nullam ac tortor vitae purus. Lacinia quis vel eros donec ac. Fames ac turpis egestas maecenas pharetra convallis. At ultrices mi tempus imperdiet nulla malesuada. Ut ornare lectus sit amet est placerat in egestas. Ultricies leo integer malesuada nunc vel. Congue quisque egestas diam in arcu cursus euismod quis.
        </p>
        <p>
        Parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Sollicitudin ac orci phasellus egestas tellus rutrum. Libero justo laoreet sit amet cursus sit amet dictum sit. Et odio pellentesque diam volutpat commodo sed. A lacus vestibulum sed arcu non odio euismod. Eget aliquet nibh praesent tristique. Luctus accumsan tortor posuere ac ut. Condimentum vitae sapien pellentesque habitant. Tincidunt augue interdum velit euismod. Tortor condimentum lacinia quis vel eros donec ac odio tempor. Accumsan sit amet nulla facilisi morbi. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Dui faucibus in ornare quam viverra. Gravida cum sociis natoque penatibus et. Pellentesque sit amet porttitor eget dolor. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Turpis massa tincidunt dui ut ornare lectus sit.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas sed enim ut sem viverra. Est ultricies integer quis auctor elit sed vulputate. Metus vulputate eu scelerisque felis imperdiet. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Suscipit tellus mauris a diam maecenas sed enim. In est ante in nibh mauris cursus. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Eu scelerisque felis imperdiet proin fermentum leo vel. Libero justo laoreet sit amet cursus sit amet dictum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Nisl condimentum id venenatis a condimentum vitae. Morbi tincidunt augue interdum velit euismod.
        </p>
        <p>
        Sed enim ut sem viverra aliquet eget sit. Nisl pretium fusce id velit ut tortor pretium viverra. Ut consequat semper viverra nam libero justo laoreet sit. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. A diam sollicitudin tempor id eu nisl nunc mi. Tortor at risus viverra adipiscing at in tellus integer. Arcu non sodales neque sodales ut etiam sit amet nisl. Quisque non tellus orci ac auctor augue mauris augue. Urna neque viverra justo nec. Suspendisse ultrices gravida dictum fusce. Tempus imperdiet nulla malesuada pellentesque elit eget gravida.
        </p>
        <p>
        Non curabitur gravida arcu ac. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Cursus euismod quis viverra nibh cras pulvinar. Risus viverra adipiscing at in. Proin libero nunc consequat interdum varius. In fermentum posuere urna nec tincidunt praesent semper feugiat. Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Convallis posuere morbi leo urna. Sit amet luctus venenatis lectus. Amet nisl purus in mollis nunc sed id semper risus. Facilisi etiam dignissim diam quis enim. Massa ultricies mi quis hendrerit dolor. Id leo in vitae turpis massa sed.
        </p>
        <p>
        Lorem ipsum dolor sit amet. Tortor vitae purus faucibus ornare suspendisse sed nisi. Magnis dis parturient montes nascetur ridiculus mus. Turpis in eu mi bibendum neque. Nibh mauris cursus mattis molestie. Diam phasellus vestibulum lorem sed risus ultricies. Nulla pellentesque dignissim enim sit amet venenatis urna. Habitant morbi tristique senectus et netus et malesuada. Feugiat in fermentum posuere urna nec tincidunt praesent. Velit scelerisque in dictum non. Et pharetra pharetra massa massa.
        </p>
        <p>
        Mauris in aliquam sem fringilla ut morbi tincidunt. Non blandit massa enim nec dui nunc. Arcu dictum varius duis at consectetur lorem donec massa. Ullamcorper velit sed ullamcorper morbi tincidunt. Tortor id aliquet lectus proin nibh. Lorem donec massa sapien faucibus et. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Nibh sit amet commodo nulla facilisi nullam. Lectus nulla at volutpat diam ut venenatis tellus in metus. Blandit turpis cursus in hac habitasse platea. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Vitae nunc sed velit dignissim sodales ut eu sem integer. Suspendisse potenti nullam ac tortor. Augue eget arcu dictum varius duis at consectetur lorem donec.
        </p>
        <p>
        Sed augue lacus viverra vitae. Vestibulum rhoncus est pellentesque elit. Egestas sed sed risus pretium quam vulputate dignissim. Ante metus dictum at tempor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Donec enim diam vulputate ut pharetra sit amet. Potenti nullam ac tortor vitae purus. Lacinia quis vel eros donec ac. Fames ac turpis egestas maecenas pharetra convallis. At ultrices mi tempus imperdiet nulla malesuada. Ut ornare lectus sit amet est placerat in egestas. Ultricies leo integer malesuada nunc vel. Congue quisque egestas diam in arcu cursus euismod quis.
        </p>
        <p>
        Parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Sollicitudin ac orci phasellus egestas tellus rutrum. Libero justo laoreet sit amet cursus sit amet dictum sit. Et odio pellentesque diam volutpat commodo sed. A lacus vestibulum sed arcu non odio euismod. Eget aliquet nibh praesent tristique. Luctus accumsan tortor posuere ac ut. Condimentum vitae sapien pellentesque habitant. Tincidunt augue interdum velit euismod. Tortor condimentum lacinia quis vel eros donec ac odio tempor. Accumsan sit amet nulla facilisi morbi. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Dui faucibus in ornare quam viverra. Gravida cum sociis natoque penatibus et. Pellentesque sit amet porttitor eget dolor. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Turpis massa tincidunt dui ut ornare lectus sit.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet bibendum enim facilisis gravida neque convallis a. Maecenas sed enim ut sem viverra. Est ultricies integer quis auctor elit sed vulputate. Metus vulputate eu scelerisque felis imperdiet. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Suscipit tellus mauris a diam maecenas sed enim. In est ante in nibh mauris cursus. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Eu scelerisque felis imperdiet proin fermentum leo vel. Libero justo laoreet sit amet cursus sit amet dictum. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Nisl condimentum id venenatis a condimentum vitae. Morbi tincidunt augue interdum velit euismod.
        </p>
        <p>
        Sed enim ut sem viverra aliquet eget sit. Nisl pretium fusce id velit ut tortor pretium viverra. Ut consequat semper viverra nam libero justo laoreet sit. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. A diam sollicitudin tempor id eu nisl nunc mi. Tortor at risus viverra adipiscing at in tellus integer. Arcu non sodales neque sodales ut etiam sit amet nisl. Quisque non tellus orci ac auctor augue mauris augue. Urna neque viverra justo nec. Suspendisse ultrices gravida dictum fusce. Tempus imperdiet nulla malesuada pellentesque elit eget gravida.
        </p>
        <p>
        Non curabitur gravida arcu ac. Ac odio tempor orci dapibus ultrices in iaculis nunc sed. Cursus euismod quis viverra nibh cras pulvinar. Risus viverra adipiscing at in. Proin libero nunc consequat interdum varius. In fermentum posuere urna nec tincidunt praesent semper feugiat. Aliquam ut porttitor leo a diam sollicitudin tempor id eu. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Convallis posuere morbi leo urna. Sit amet luctus venenatis lectus. Amet nisl purus in mollis nunc sed id semper risus. Facilisi etiam dignissim diam quis enim. Massa ultricies mi quis hendrerit dolor. Id leo in vitae turpis massa sed.
        </p>
        <p>
        Lorem ipsum dolor sit amet. Tortor vitae purus faucibus ornare suspendisse sed nisi. Magnis dis parturient montes nascetur ridiculus mus. Turpis in eu mi bibendum neque. Nibh mauris cursus mattis molestie. Diam phasellus vestibulum lorem sed risus ultricies. Nulla pellentesque dignissim enim sit amet venenatis urna. Habitant morbi tristique senectus et netus et malesuada. Feugiat in fermentum posuere urna nec tincidunt praesent. Velit scelerisque in dictum non. Et pharetra pharetra massa massa.
        </p>
        <p>
        Mauris in aliquam sem fringilla ut morbi tincidunt. Non blandit massa enim nec dui nunc. Arcu dictum varius duis at consectetur lorem donec massa. Ullamcorper velit sed ullamcorper morbi tincidunt. Tortor id aliquet lectus proin nibh. Lorem donec massa sapien faucibus et. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Nibh sit amet commodo nulla facilisi nullam. Lectus nulla at volutpat diam ut venenatis tellus in metus. Blandit turpis cursus in hac habitasse platea. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Vitae nunc sed velit dignissim sodales ut eu sem integer. Suspendisse potenti nullam ac tortor. Augue eget arcu dictum varius duis at consectetur lorem donec.
        </p>
        <p>
        Sed augue lacus viverra vitae. Vestibulum rhoncus est pellentesque elit. Egestas sed sed risus pretium quam vulputate dignissim. Ante metus dictum at tempor. Massa sapien faucibus et molestie ac feugiat sed lectus vestibulum. Vitae purus faucibus ornare suspendisse sed nisi lacus sed viverra. Donec enim diam vulputate ut pharetra sit amet. Potenti nullam ac tortor vitae purus. Lacinia quis vel eros donec ac. Fames ac turpis egestas maecenas pharetra convallis. At ultrices mi tempus imperdiet nulla malesuada. Ut ornare lectus sit amet est placerat in egestas. Ultricies leo integer malesuada nunc vel. Congue quisque egestas diam in arcu cursus euismod quis.
        </p>
        <p>
        Parturient montes nascetur ridiculus mus mauris vitae ultricies leo. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Sollicitudin ac orci phasellus egestas tellus rutrum. Libero justo laoreet sit amet cursus sit amet dictum sit. Et odio pellentesque diam volutpat commodo sed. A lacus vestibulum sed arcu non odio euismod. Eget aliquet nibh praesent tristique. Luctus accumsan tortor posuere ac ut. Condimentum vitae sapien pellentesque habitant. Tincidunt augue interdum velit euismod. Tortor condimentum lacinia quis vel eros donec ac odio tempor. Accumsan sit amet nulla facilisi morbi. Ac tortor vitae purus faucibus ornare suspendisse sed nisi lacus. Dui faucibus in ornare quam viverra. Gravida cum sociis natoque penatibus et. Pellentesque sit amet porttitor eget dolor. Libero nunc consequat interdum varius sit amet mattis vulputate enim. Turpis massa tincidunt dui ut ornare lectus sit.
        </p>
      </main>

      <aside data-sticky="true">
        <h2>Sidebar </h2>
        <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
          <li>Link 4</li>
          <li>Link 5</li>
          <li>Link 6</li>
          <li>Link 7</li>
          <li>Link 8</li>
          <li>Link 9</li>
          <li>Link 10</li>
          <li>Link 11</li>
          <li>Link 12</li>
          <li>Link 13</li>
          <li>Link 14</li>
          <li>Link 15</li>
          <li>Link 16</li>
          <li>Link 17</li>
          <li>Link 18</li>
          <li>Link 19</li>
          <li>Link 20</li>
        </ul>
      </aside>
    </div>
  </body>
</html>

원하는 효과를 위해 스티키 사이드바 JS 플러그인을 사용할 수도 있습니다.여기에는 "사용법"에 대한 작고 간단한 설명서가 있습니다.저도 비슷한 스크롤 효과를 원했는데 꽤 효과가 좋았습니다.

https://abouolia.github.io/sticky-sidebar/

바닐라 JS 옵션!

바닐라 JS로 이것을 하고 싶은 마음이 잠시 후에, 저는 마침내 그것을 깨뜨렸습니다.확실히 정리하는 것과 관련이 있겠지만, 효과는 있어요!

  const sidebar = document.querySelector('#sidebar');

  let lastScrollTop = 0;
  let scrollingDown;
  let isAbsolute = false;

  let absolutePosition = 0;
  let windowTop;
  let sidebarTop;
  let windowBottom;
  let sidebarBottom;

  function checkScrollDirection() {
    if (lastScrollTop <= window.scrollY) {
      scrollingDown = true
    } else {
      scrollingDown = false
    }
    lastScrollTop = window.scrollY;
  }      

  function fixit(pos,top,bottom,isAb) {

    sidebar.style.position = pos;
    sidebar.style.top = top;
    sidebar.style.bottom = bottom;
    isAbsolute = isAb;
  }

  function scrolling() {
    //optional width check
    if (window.innerHeight <= sidebar.offsetHeight && window.innerWidth > 996) {
      checkScrollDirection();
      windowTop = window.scrollY;
      sidebarTop = sidebar.offsetTop;
      windowBottom = window.scrollY + window.innerHeight;
      sidebarBottom = sidebar.offsetHeight + sidebar.offsetTop;

      if(!scrollingDown && windowTop <= sidebarTop) {
        //fixToTop
        fixit("fixed",0,"unset",false)
      }

      if(scrollingDown && windowBottom >= sidebarBottom) {
        //fixToBottom
        fixit("fixed","unset",0,false)
      }

      if((!isAbsolute && windowTop > sidebarTop) || !isAbsolute && windowBottom < sidebarBottom) {
        //fixInPlace
        let absolutePosition = (windowTop + sidebar.offsetTop) + "px";
        fixit("absolute",absolutePosition,"unset",true)
      }
    }
  }

  window.addEventListener('scroll', scrolling);

WP 스티키 사이드바라고 알려진 워드프레스 저장소에 상대적으로 알려지지 않은 플러그인이 있습니다.플러그인이 원하는 대로 정확히 수행합니다(스티키 사이드바: 아래로 스크롤할 때 아래로, 위로 스크롤할 때 위로 고정). WP 스티키 사이드바 워드프레스 저장소 링크: https://wordpress.org/plugins/mystickysidebar/

저는 똑같은 것을 찾고 있었습니다.그래픽과 비슷한 질문을 찾기 위해 모호한 용어를 검색해야 했습니다.알고 보니 그게 바로 내가 찾던 것이었군요.플러그인을 찾을 수 없어서 직접 만들기로 했습니다.누군가 이것을 보고 다듬어주길 바랍니다.

여기 제가 사용하고 있는 빠르고 더러운 샘플 html이 있습니다.

<div id="main">
    <div class="col-1">
    </div>
    <div class="col-2">
        <div class="side-wrapper">
            sidebar content
        </div>
    </div>
</div>

제가 만든 jQuery는 다음과 같습니다.

var lastScrollPos = $(window).scrollTop();
var originalPos = $('.side-wrapper').offset().top;
if ($('.col-2').css('float') != 'none') {
    $(window).scroll(function(){
        var rectbtfadPos = $('.rectbtfad').offset().top + $('.rectbtfad').height();
        // scroll up direction
        if ( lastScrollPos > $(window).scrollTop() ) {
            // unstick if scrolling the opposite direction so content will scroll with user
            if ($('.side-wrapper').css('position') == 'fixed') {
                $('.side-wrapper').css({
                    'position': 'absolute',
                    'top': $('.side-wrapper').offset().top + 'px',
                    'bottom': 'auto'
                });
            } 
            // if has reached the original position, return to relative positioning
            if ( ($(window).scrollTop() + $('#masthead').height()) < originalPos ) {
                $('.side-wrapper').css({
                    'position': 'relative',
                    'top': 'auto',
                    'bottom': 'auto'
                });
            } 
            // sticky to top if scroll past top of sidebar
            else if ( ($(window).scrollTop() + $('#masthead').height()) < $('.side-wrapper').offset().top && $('.side-wrapper').css('position') == 'absolute' ) {
                $('.side-wrapper').css({
                    'position': 'fixed',
                    'top': 15 + $('#masthead').height() + 'px', // padding to compensate for sticky header
                    'bottom': 'auto'
                });
            }
        } 
        // scroll down
        else {
            // unstick if scrolling the opposite direction so content will scroll with user
            if ($('.side-wrapper').css('position') == 'fixed') {
                $('.side-wrapper').css({
                    'position': 'absolute',
                    'top': $('.side-wrapper').offset().top + 'px',
                    'bottom': 'auto'
                });
            } 
            // check if rectbtfad (bottom most element) has reached the bottom
            if ( ($(window).scrollTop() + $(window).height()) > rectbtfadPos && $('.side-wrapper').css('position') != 'fixed' ) {
                $('.side-wrapper').css({
                    'width': $('.col-2').width(),
                    'position': 'fixed',
                    'bottom': '0',
                    'top': 'auto'
                });
            }
        }
        // set last scroll position to determine if scrolling up or down
        lastScrollPos = $(window).scrollTop();

    });
}

일부 참고 사항:

  • .rectbtfad는 내 사이드바에서 가장 아래에 있는 요소입니다.
  • #masthead의 높이는 끈적끈적한 헤더라 보완이 필요해서 사용하고 있습니다.
  • 반응형 디자인을 사용하고 있기 때문에 col-2 float에 대한 체크가 있습니다. 작은 화면에서는 활성화되지 않도록 합니다.

누군가 이것을 좀 더 다듬을 수 있다면 좋을 것입니다.

https://medium.com/ 오른쪽 사이드바의 바닐라 JS 구현.

데모: JSFiddle

 function addThrottledScrollEventListener(element, callback) {
    let lastScrollPosition = 0;
    let isAnimationFrameRequested = false;
    element.addEventListener("scroll", function () {
        let beforeLastScrollPosition = lastScrollPosition;
        lastScrollPosition = element.scrollY;
        if (!isAnimationFrameRequested) {
            element.requestAnimationFrame(function () {
                callback(lastScrollPosition, beforeLastScrollPosition);
                isAnimationFrameRequested = false;
            });
            isAnimationFrameRequested = true;
        }
    });
}

function setupRightSidebarScroll(sidebar) {
    let isStickToTop = false;
    let isStickToBottom = false;
    addThrottledScrollEventListener(window, (currentScrollPosition, previousScrollPosition) => {
        let isScrollingDown = previousScrollPosition < currentScrollPosition;
        let isScrollingUp = !isScrollingDown;
        let scrollTop = window.scrollY;
        let scrollBottom = scrollTop + window.innerHeight;
        let sidebarBottom = sidebar.offsetTop + sidebar.offsetHeight;
        let isAlwaysSticky = sidebar.offsetHeight <= window.innerHeight;

        if (isStickToTop && isAlwaysSticky)
            return;
        if (!isStickToTop && isScrollingUp && scrollTop <= sidebar.offsetTop || isAlwaysSticky) {
            sidebar.style.position = "sticky";
            sidebar.style.marginTop = `0px`;
            sidebar.style.top = "0px";
            isStickToTop = true;
            return;
        }
        if (isScrollingDown && isStickToTop) {
            sidebar.style.position = "relative";
            sidebar.style.top = `0px`;
            sidebar.style.marginTop = `${scrollTop}px`;
            isStickToTop = false;
            return;
        }
        if (!isStickToBottom && isScrollingDown && scrollBottom >= sidebarBottom) {
            sidebar.style.position = "sticky";
            sidebar.style.marginTop = `0px`;
            sidebar.style.top = `${window.innerHeight - sidebar.offsetHeight}px`;
            isStickToBottom = true;
            return;
        }
        if (isScrollingUp && isStickToBottom) {
            sidebar.style.position = "relative";
            sidebar.style.marginTop = `${scrollBottom - sidebar.offsetHeight}px`;
            sidebar.style.top = `0px`;
            isStickToBottom = false;
            return;
        }
    });
}

언급URL : https://stackoverflow.com/questions/18358816/sticky-sidebar-stick-to-bottom-when-scrolling-down-top-when-scrolling-up

반응형

'programing' 카테고리의 다른 글

단순 jQuery 선택기는 Chrome에서 첫번째 요소만 선택합니다..?  (0) 2023.09.19
load_plugin_text 도메인이 작동하지 않습니다.  (0) 2023.09.19
버퍼 오버플로를 호출하려면 어떻게 해야 합니까?  (0) 2023.09.19
AngularJS로 멀티파트 요청  (0) 2023.09.19
MySQL 쿼리 함수에서 '정의되지 않음'을 반환하는 NodeJS  (0) 2023.09.19

'programing'의 다른글

  • 현재글Sticky 사이드바: 아래로 스크롤할 때는 아래로, 위로 스크롤할 때는 위로 붙습니다.

관련글

댓글

티스토리툴바