主页 / 问题 / 1170345
Accepted
Michael Miller
Asked:2020-08-25 20:33:42 +0000 UTC2020-08-25 20:33:42 +0000 UTC

如果粘性块的高度大于浏览器的高度，如何滚动其内容？

  • 772

function sticky(){
var sidebar = $('.sidebar');
var sidebarHeight = sidebar.outerHeight(true);
var sidebarOffsetTop = sidebar.offset().top;
var parent = $('.flexCatalog');
var parentHeight = parent.outerHeight(true);
var parentOffsetTop = parent.offset().top;
var bottom = parent.offset().top + parent.outerHeight(true) - $(window).outerHeight(true);
var stop = parent.outerHeight(true) - $(window).outerHeight(true) - sidebarOffsetTop + parentOffsetTop;
var sideBarOffsetBottom = sidebarOffsetTop + sidebarHeight;


//alert(parentHeight + ',' + bottom + ', ' + stop + ', ');
$(window).on('scroll', function(){

var scroll = $(window).scrollTop();

if (scroll >= sidebarOffsetTop && scroll <= bottom){

sidebar.addClass('sticky').css('top', '0');

}
else if(scroll >= sidebarOffsetTop && scroll >= bottom){

sidebar.removeClass('sticky').css('top', stop + 'px');

}
else{

sidebar.removeClass('sticky').css('top', '0');

}



});
}
$(window).on('load resize', function(){

sticky();

});
html, body {
  min-height: 2000px;
  padding: 50px 0;
  margin: auto;
}


h2 {
  margin: 0;
}

.content{
  width: 90%;
  margin: auto;
}


 .posr{
  position: relative;
 }

.sidebar{
 z-index:20;
}

.sidebar.sticky{
 position: fixed;
}

.flexCatalog{
 width: 100%;
 display: flex;
 flex-wrap: wrap;
justify-content: space-between;

 }

.partFirst{
 max-width: 30%;
flex-basis: 30%;
}

.partSecond{
 max-width: 60%;
 flex-basis: 60%;
 background: red;
}


.goods{
 height: 1581px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <div class="content">
  <div class="flexCatalog">
<div class="partFirst posr">
<div class="sidebar posr">
<h2>Категории</h2>
<div>пункт</div>
<div>пункт</div>
<div>пункт</div>
<div>пункт</div>
<div>пункт</div>
<div>пункт</div>
<h2>Страны<br> производители</h2>
<div>Фильтр</div>
<div>Фильтр</div>
<div>Фильтр</div>
<div>Фильтр</div>
<div>Фильтр</div>
<div>Фильтр</div>
<div>Фильтр</div>
<div>Фильтр</div>
<div>Фильтр</div>
</div></div>
<div class="partSecond df">
<div class="goods"></div>
</div></div>
  </div>
  
  
</body>
</html>

画出这样一个粘性块。我必须马上说，请不要提供插件，我不想使用它们，这里不需要它们。

现在，当滚动条到达侧边栏的顶部时，我们会给它一个粘滞类，它有position: fixed属性，如果从浏览器窗口底部滚动时出现父级的下部（offsetBottom ），然后从侧边栏中删除粘性类并将顶部属性添加到它的值 = 父级的高度 - 浏览器窗口高度 - cybrar offset().top + 父级 offset().top（但这些都是小事）

现在我想寻求帮助，以了解如何添加一个条件，以便（很难用手指解释）如果在滚动时侧边栏的高度大于浏览器窗口的高度（例如，过滤器不可见，它们不适合整个屏幕），那么我们不添加sticky类，而是等到它滚动到侧边栏底部才修复它，但是当我们向上滚动时，我们等到侧边栏的顶部出现，然后再修复它。

结果的说明性示例 - VK、FB 侧边栏或此处是插件的链接https://abouolia.github.io/sticky-sidebar/#examples示例编号 2“可滚动的粘性元素”在 Google 中我没有找到类似问题的答案

javascript

2 个回答

  1. 将以下属性添加到此元素

    max-height: 100vh; /* Если высота будет больше высоты вьюпорта браузера */
overflow-y: auto;  /* То у содержимого элемента будет scroll */

    例子：

    body {
  height: 300vh;
}

.overflow {
  display: block;
  width: 250px;
  height: 350px;
  max-height: calc(100vh - 60px); /* 60px это top: 20px + bottom: 20px + padding: 10px*/
  overflow-y: auto;
  padding: 10px;
  background: gray;
  margin: auto;
  box-sizing: border-box;
  position: sticky;
  top: 20px;
  bottom: 20px;
}

.overflow .content {
  display: block;
  width: 100%;
  height: 330px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
    <div class="overflow">
  <div class="content">
    Если открыть сниппет на "весь экран" то скролла не будет
  </div>
</div>

    • 1
  2. Best Answer

    我也用谷歌搜索并没有发现任何相关信息，我决定自己做。所以。
    很棒的事情：position: sticky;
    您可以在 google 上搜索更多关于它的信息，但是对于高块，它不能正常工作，因此您需要在脚本中添加一些内容。

    我们这样做。我希望你知道什么是引导程序

    <div class="container">
  <div class="row">
    <div class="col-3">
      <div class="sticky">Тот самый высокий блок</div>
    </div>
    <div class="col-9"></div>
  </div>
</div>

    通过css，您需要设置粘性定位。嗯，缩进让它更漂亮。

    .sticky{
  position: sticky;
  top: 1rem;
  margin-bottom: 1rem;
}

    现在 js

      var lastscroll = $(window).scrollTop();
  $(window).scroll(function () {
    if (lastscroll > $(window).scrollTop()) {
      stickyleftcol("up", lastscroll - $(window).scrollTop());
    } else {
      stickyleftcol("down", $(window).scrollTop() - lastscroll);
    }
    lastscroll = $(window).scrollTop();
  });

function stickyleftcol(napravlenie, sceollpx) {
    if ($("div").is(".sticky")) {
      var raznh = $(".sticky").outerHeight() - window.innerHeight;
      if (raznh < 0) {
        raznh = 0;
      }
      if (napravlenie == "down") {
        $(".sticky").css("top", function (index, value) {
          var newSize = Number(value.replace("px", "")) - sceollpx;
          if (newSize < -raznh) {
            newSize = -raznh;
          }
          return newSize;
        });
      } else if (napravlenie == "up") {
        $(".sticky").css("top", function (index, value) {
          var newSize = Number(value.replace("px", "")) + sceollpx;
          if (newSize > 115) {
            newSize = 115;
          }
          return newSize;
        });
      }
    }
  }

    你可以在我正在做的项目中看到它是如何工作的（对于那些将来会看的人，链接不会永远有效，因为这是一个测试域）

    • 0

相关问题