programing

고정 사이드바가 jQuery와 바닥글이 겹치지 않게 하려면 어떻게 해야 합니까?

oldcodes 2023. 10. 11. 20:59
반응형

고정 사이드바가 jQuery와 바닥글이 겹치지 않게 하려면 어떻게 해야 합니까?

참고: 링크된 "복사본"은 제 게시물의 다른 게시물입니다(무의로 두번 게시됨).중복 제거를 위해 이미 플래그를 지정했습니다.

저는 이 문제에 대해 엄밀한 jQuery 솔루션이 필요합니다.워드프레스를 사용하고 있고 끈적하게 만들고 싶은 사이드바 위젯이 안에 있기 때문입니다.<aside>내가 키를 크게 할 수 없는 요소.

같은 방식으로.scrollTop()사이드바 위젯을 끈적거리게 하려면 페이지 아래쪽으로 얼마나 떨어져 있어야 하는지 감지합니다. JS가 페이지 아래쪽에서 얼마나 위에 있는지 감지하여 새로운 고정 위치를 할당하여 위젯을 "접착 해제"해야 합니다.

저는 이것을 시도했습니다..offset()하지만 저는 지금까지 그것을 작동시킬 수 없었습니다.

  function stopDiv() {
    var distance = $('.footer').offset().top - $('.widget').offset().top;
    if (distance < 10) {
      $('.widget').css({
        'top': 'auto',
        'bottom': '10px'
      });
    }
  }

제 사이드바 스크롤 아래의 토막글에서 볼 수 있듯이, 제가 바닥글에서 <10px 거리에 도달했을 때 사이드바가 새로운 고정 위치를 차지하기를 원합니다.

사용자가 뒤로 스크롤할 때까지 사이드바가 바닥글 위의 새로운 고정 위치를 맡도록 합니다.

  // Fixed Widget
  function fixDiv() {
    var $cache = $('.widget');
    if ($(window).scrollTop() > 380)
      $cache.css({
        'position': 'fixed',
        'top': '10px',
        'right': '30px'
      });
    else
      $cache.css({
        'position': 'relative',
        'top': 'auto',
        'right': 'auto'
      });
  }
  $(window).scroll(fixDiv);
  fixDiv();

/* My attempt 
  function stopDiv() {
    var distance = $('.footer').offset().top - $('.widget').offset().top;
    if (distance < 10) {
      $('.widget').css({
        'top': 'auto',
        'bottom': '10px'
      });
    }
  }
  $(window).scroll(stopDiv);
  stopDiv();
  */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
* {
  font-family: 'Open Sans';
  color: #fff;
  box-sizing: content-box;
}

body {
  padding: 0;
  margin: 0;
}

p {
  margin: 20px;
}

hr {
  width: 85%;
  border-style: solid;
}

.main-content {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 150px auto;
  grid-template-areas: "nav nav nav nav" "main main main sidebar";
  grid-column-gap: 20px;
  grid-row-gap: 0px;
}

.nav {
  grid-area: nav;
  background-color: #266392;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
}

.nav h1 {
  place-self: center;
  font-weight: 400;
  font-size: 40px;
  grid-column: 2;
}

.nav i {
  align-self: center;
  font-size: 40px;
}

.main {
  height: 1500px;
  width: 98%;
  justify-self: start;
  grid-area: main;
  padding: 10px;
  float: left;
  background-color: #e8624c;
  margin: 10px;
}

.sidebar-container {
  height: 900px;
  width: 300px;
  justify-self: start;
  background-color: #209B66;
  grid-area: sidebar;
  grid-column: 4;
  top: 10px;
  margin: 10px;
  padding: 20px;
  display: grid;
  grid-template-rows: auto;
  grid-row-gap: 10px;
}

.sidebar-container>p {
  display: grid;
  align-items: start;
  padding: 0;
  margin: 0;
}

.widget {
  height: 500px;
  width: 300px;
  background-color: #E3962F;
}

.footer {
  background-color: #333;
  height: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="main-content">
    <div class="nav">
      <h1>Sticky Sidebar Problem</h1>
      <i class="fa fa-arrow-down" aria-hidden="true"></i>
    </div>
    <div class="main">
      <p>
        [Main Content]
      </p>

    </div>
    <div class="sidebar-container">
      <p>[Sidebar Container]</p>

      <div class="widget">
        <p> [Widget]</p>
      </div>
    </div>
  </div>
  <div class="footer"></div>
</body>

이 정답은 이 게시물에서 benvc에 의해 제공되었습니다.중복해서 죄송합니다.다른 쪽이 아니라 이 페이지에 누가 착륙했을 경우를 대비해서 여기에 답을 올리고 싶었습니다.

...below는 당신의 코드를 사용하여 스티키 사이드바 위젯을 위한 새로운 jquery와 css를 사용하여 사이드바 위젯의 위치를 절대 및 오른쪽: 30 px로 만드는 jquery 솔루션입니다. (이 값은 당신이 위젯을 사이드바 안에 정확히 놓을 위치에 따라 임의적입니다.)또한 아무것도 하지 않거나 그리드 레이아웃의 응답성을 방해하는 몇 가지 다른 CSS 라인에 대해 언급했습니다(비록 궁극적으로 레이아웃이 어디로 끝나는지에 따라 미디어 쿼리를 포함한 위젯 요소의 올바른 CSS를 조정해야 할 수도 있지만, 끈적거리는 사이드바 기능은 이러한 변경 사항과 함께 또는 없이 작동합니다).

$(function() {

  const sidebar = $('.sidebar-container');
  const widget = $('.widget');
  const footer = $('.footer');
  const space = 10; // arbitrary value to create space between the window and widget
  const startTop = sidebar.offset().top + 60; // arbitrary start top position
  const endTop = footer.offset().top - widget.height() - space;
  
  widget.css('top', startTop);
  
  $(window).scroll(function() {
  
    let windowTop = $(this).scrollTop();
    let widgetTop = widget.offset().top;
    let newTop = startTop;
  
    if (widgetTop >= startTop && widgetTop <= endTop) {
      if (windowTop > startTop - space && windowTop < endTop - space) {
        newTop = windowTop + space;
      } else if (windowTop > endTop - space) {
        newTop = endTop;
      }
      widget.stop().animate({
        'top': newTop
      });
    }
  
  });
  
});
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
* {
  font-family: 'Open Sans';
  color: #fff;
  box-sizing: content-box;
}

body {
  padding: 0;
  margin: 0;
}

p {
  margin: 20px;
}

hr {
  width: 85%;
  border-style: solid;
}

.main-content {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 150px auto;
  grid-template-areas: "nav nav nav nav" "main main main sidebar";
  grid-column-gap: 20px;
  grid-row-gap: 0px;
}

.nav {
  grid-area: nav;
  background-color: #266392;
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
}

.nav h1 {
  place-self: center;
  font-weight: 400;
  font-size: 40px;
  grid-column: 2;
}

.nav i {
  align-self: center;
  font-size: 40px;
}

.main {
  height: 1500px;
  /*width: 98%;
  justify-self: start;*/
  grid-area: main;
  padding: 10px;
  /*float: left;*/
  background-color: #e8624c;
  margin: 10px;
}

.sidebar-container {
  height: 900px;
  width: 300px;
  justify-self: end;
  background-color: #209B66;
  grid-area: sidebar;
  grid-column: 4;
  /*top: 10px;*/
  margin: 10px;
  padding: 20px;
  display: grid;
  grid-template-rows: auto;
  grid-row-gap: 10px;
}

.sidebar-container>p {
  display: grid;
  align-items: start;
  padding: 0;
  margin: 0;
}

.widget {
  height: 500px;
  width: 300px;
  background-color: #E3962F;
  position: absolute;
  right: 30px;
}

.footer {
  background-color: #333;
  height: 800px;
}
<body>
  <div class="main-content">
    <div class="nav">
      <h1>Sticky Sidebar Problem</h1>
      <i class="fa fa-arrow-down" aria-hidden="true"></i>
    </div>
    <div class="main">
      <p>
        [Main Content]
      </p>

    </div>
    <div class="sidebar-container">
      <p>[Sidebar Container]</p>

      <div class="widget">
        <p> [Widget]</p>
      </div>
    </div>
  </div>
  <div class="footer"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

언급URL : https://stackoverflow.com/questions/52010404/how-do-i-stop-a-fixed-sidebar-from-overlapping-the-footer-with-jquery

반응형

'programing' 카테고리의 다른 글

XmlSerializer를 사용하여 빈 xml 특성 값을 nullable int 속성으로 역직렬화  (0) 2023.10.11
값이 숫자 범위 내에 있는지 확인합니다.  (0) 2023.10.11
Angular에서 페이지 로드 후 앵커링하려면 스크롤  (0) 2023.10.11
PowerShell 시도/잡기 및 재시도  (0) 2023.10.11
UI 라우터에서 '컨트롤러'를 사용하는 것이 예상대로 작동하지 않습니다.  (0) 2023.10.11

'programing'의 다른글

  • 현재글고정 사이드바가 jQuery와 바닥글이 겹치지 않게 하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바