如何阻止固定侧边栏与 jQuery 重叠页脚？
[英]How do I stop a fixed sidebar from overlapping the footer with jQuery?
问题描述
注意： “重复”链接是我的另一篇文章（无意中发布了两次）。 我已经标记了要删除的重复项。
我需要一个严格的 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>
1 个解决方案
解决方案1
1 已采纳 2018-09-05 14:33:40
这个正确的答案是由benvc在这篇文章中提供的。 抱歉重复。 我想在这里发布答案，以防有人登陆此页面而不是其他页面。
...下面是一个 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>
如何防止固定按钮重叠页脚区域并停止页脚所在位置顶部的按钮
[英]How to prevent fixed button from overlapping footer area and stop the button on top of where the footer is located
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.