如何阻止固定側邊欄與 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.