注意:"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'
});
}
}
你可以在我的侧栏下方的片段中看到它应该滚动,但我希望侧边栏在距离页脚距离<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在this post上提供的。对不起,副本。我想在这里发布答案,万一有人登陆这个页面而不是另一个。
...下面是一个jquery解决方案,使用你的代码使用新的jquery为粘性侧边栏小部件和css使侧边栏小部件位置:绝对和右边:30px(该值是任意的,具体取决于你希望窗口小部件位于边栏)。此外,注释掉了一些其他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>