个人中心
gpt4 book ai didi

javascript - 如何阻止固定侧边栏与页脚与 jQuery 重叠？

转载 作者：搜寻专家 更新时间：2023-11-01 04:34:47 24 4
gpt4 key购买 nike

注意: "duplicate" linked是我的另一个帖子(不小心发了两次)。我已经标记了要删除的重复项。

我需要一个严格的 jQuery 解决方案来解决这个问题。这是因为我使用的是 Wordpress，而我想要粘性的侧边栏小部件位于 <aside> 中。我无法制作全高的元素。

以与.scrollTop()相同的方式检测我在页面下方多远以使侧边栏小部件具有粘性我需要 JS 检测我距离页面底部多远以通过分配新的固定位置“取消粘附”小部件。

我试着用 .offset() 来做到这一点但到目前为止我一直无法让它发挥作用。 

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

正如您在下面的代码片段中看到的那样，我的侧边栏会按原样滚动，但我希望侧边栏在距页脚 <10 像素的距离时呈现一个新的固定位置。

我希望边栏在页脚上方占据一个新的固定位置，直到用户向上滚动。 

  // 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 提供在 this post .对不起重复。我想在这里发布答案，以防有人登陆此页面而不是其他页面。

...below is a jquery solution using your code with new jquery for the sticky sidebar widget and css to make the sidebar widget position: absolute and right: 30px (that value is arbitrary depending on where exactly you want the widget to sit inside the sidebar). Also, commented out a few other css lines that either weren't doing anything or interfered with the responsiveness of your grid layout (sticky sidebar functionality works with or without those changes, although you may need to adjust the right css of your widget element, including media queries, depending on where your layout ultimately ends up).

$(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>

关于javascript - 如何阻止固定侧边栏与页脚与 jQuery 重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52010404/

24 4 0
文章推荐： ios - 安装在同一局域网内不同设备上的 iOS 应用程序之间的通信
文章推荐： javascript - 小数点不精确
文章推荐： javascript - 代理 HTMLElement
文章推荐： javascript - 如何在 Photoshop 中展平阵列？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com