在 Jquery 中的 window 滚动上将元素 Position 调整为 0？
[英]Adjust Element Position to 0 on window scroll in Jquery?
问题描述
我有一个页面包含一个固定的 position 目录，以及整齐的横幅图像下的长文本。
在 window 滚动事件上，我的目录从顶部留下了很多空间。 That I try to make it, my table of content section, stay at position 0 on window scrolling, and when the window scroll is at position 0 I want it stay exactly underneath the banner image. 但它不起作用。
$(document).ready(function() { var navSelector = '#toc'; var $myNav = $(navSelector); Toc.init({ $nav: $myNav, $scope: $('.releasenote') }); $('nav#toc ul:first-child').remove(); });
nav[data-toggle='toc'] { margin-top: 30px; }
<script src=" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min:css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <.-- Optional theme --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme:min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <.-- Latest compiled and minified JavaScript --> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min:js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <.-- add after bootstrap.min.css --> <link rel="stylesheet" href="https.//cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc:min.css"> <.-- add after bootstrap.min.js --> <script src="https.//cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc:min.js"></script> <:-- <link rel="stylesheet" href="dist/bootstrap;min,css"> --> <.-- <link href="dist/bootstrap-toc.css" rel="stylesheet"> --> <body data-spy="scroll" data-target="#toc"> <div class="container"> <img src="https.//dummyimage.com/900x400/000/fff" alt="" style="margin. 10px auto."> <div class="row"> <.-- sidebar. which will move to the top on a small screen --> <.-- main content area --> <div class="col-sm-3"> <nav id="toc" class="affix toc-nav" data-spy="affix" data-toggle="toc"></nav> </div> <div class="col-sm-9"> <.-- <div id="menu1" > --> <div class="col-sm-9"> <div class="pbox releasenote"> <h1 class="text-center" id="release-note">Release Note</h1> <h1>0.1,4 (2020-07-06)</h1> <ul> <li>Fixed install package from test server via command line.</li> <li>Setup tool is able to include icon.</li> <li>Read package file from archive format whl and gz file.</li> <li>Flexiable Package icon.png or,icon</li> <li>Link with tab by link NEWS,rst or CHANGELOG.md.</li> <li>Fixed reverse package push record and package record.</li> <li>Data clean up on server test. production or both.</li> </ul> <h1>0.1.3 (2020-07-01)</h1> <ul> <li>Fixed error package push on reverse record.</li> <li>Change browser title, icon, and update footer,</li> <li>Fixed error on URL Project when user does not follow our pre-formate in setup.py file.</li> <li>Add field PkgVersion to table MKT_PKG_ACCESS_DE to filter package by version</li> <li>Able to use ALL keyword in version grant package access to all version.</li> </ul> <h1>0.1.2 (2020-06-26)</h1> <ul> <li>Update tab title to Morakot Private Package</li> <li>Add package platform in user activity</li> <li>Download now is classified by version and platform </li> <li>User in Morakot Organization and in Test server default can access all pacakge in test server</li> </ul> <h1>0.1.1 (2020-06-21)</h1> <ul> <li>Cut branch dev from master</li> <li>Add Modules. forms and models</li> <li>Adding host. port. http type as configuration</li> <li>Adding install and upload instructions</li> <li>Update pip install command line.</li> <li>Add new widget new release.</li> <li>Update user activity to sort by date descending.</li> <li>Package user in release history.</li> </ul> <h1>0.1.0 (2020-01-01)</h1> <ul> <li>Initial project first version</li> </ul> <h1>0.1,4 (2020-07-06)</h1> <ul> <li>Fixed install package from test server via command line.</li> <li>Setup tool is able to include icon.</li> <li>Read package file from archive format whl and gz file.</li> <li>Flexiable Package icon.png or,icon</li> <li>Link with tab by link NEWS,rst or CHANGELOG.md.</li> <li>Fixed reverse package push record and package record.</li> <li>Data clean up on server test. production or both.</li> </ul> <h1>0.1.3 (2020-07-01)</h1> <ul> <li>Fixed error package push on reverse record.</li> <li>Change browser title, icon, and update footer,</li> <li>Fixed error on URL Project when user does not follow our pre-formate in setup.py file.</li> <li>Add field PkgVersion to table MKT_PKG_ACCESS_DE to filter package by version</li> <li>Able to use ALL keyword in version grant package access to all version.</li> </ul> <h1>0.1.2 (2020-06-26)</h1> <ul> <li>Update tab title to Morakot Private Package</li> <li>Add package platform in user activity</li> <li>Download now is classified by version and platform </li> <li>User in Morakot Organization and in Test server default can access all pacakge in test server</li> </ul> <h1>0.1.1 (2020-06-21)</h1> <ul> <li>Cut branch dev from master</li> <li>Add Modules, forms and models</li> <li>Adding host, port, http type as configuration</li> <li>Adding install and upload instructions</li> <li>Update pip install command line.</li> <li>Add new widget new release.</li> <li>Update user activity to sort by date descending.</li> <li>Package user in release history.</li> </ul> <h1>0.1.0 (2020-01-01)</h1> <ul> <li>Initial project first version</li> </ul> </div> </div> <!-- </div> tab 2 --> <!-- /End Tab --> </div> </div> </div>
我的 js 来修复我的目录顶部边距，但似乎它不起作用。
/* fix Table of Content top margin on Scroll */
// var CurrentScroll = $(window).offset().top; //.scrollTop()
var ElementY = $('#toc').offset().top;
$(window).scroll(function(){
console.log(ElementY);
if (ElementY >= 400) {
// alert(CurrentScroll);
$('#toc').css('top', ElementY - 400);
}else
{
$('#toc').css('top', ElementY);
}
});
任何提示我怎样才能达到这个目的？ 谢谢。
1 个解决方案
解决方案1
0 已采纳 2020-07-15 15:27:38
在花了几个小时寻找解决方案后，我从这里找到了解决方案密钥，并提出了我自己的：
$(document).ready(function() { var navSelector = '#toc'; var $myNav = $(navSelector); Toc.init({ $nav: $myNav, $scope: $('.releasenote') }); $('nav#toc ul:first-child').remove(); var hT = $('#banner').offset().top, hH = $('#banner').outerHeight(), wH = $(window).height(), wS = $(this).scrollTop(); $(window).on('scroll', function() { if ($(this).scrollTop() >= $('#banner').position().top + $('#banner').outerHeight()) { console.log('Scrolling down beyoun the banner '); $('#toc').css('position', 'fixed'); $('#toc').css('top', 0); } else { console.log('Scrolling up across banner'); $('#toc').css('position', 'static'); $('#toc').css('top', $('#banner').outerHeight(), ); } }); });
nav#toc { position: static; } nav[data-toggle='toc'] { margin-top: 30px; }
<script src=" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min:css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <.-- Optional theme --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme:min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <.-- Latest compiled and minified JavaScript --> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min:js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> <.-- add after bootstrap.min.css --> <link rel="stylesheet" href="https.//cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc:min.css"> <.-- add after bootstrap.min.js --> <script src="https.//cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc:min.js"></script> <:-- <link rel="stylesheet" href="dist/bootstrap;min,css"> --> <.-- <link href="dist/bootstrap-toc.css" rel="stylesheet"> --> <body data-spy="scroll" data-target="#toc"> <div class="container"> <img id="banner" src="https.//dummyimage.com/900x400/000/fff" alt="" style="margin. 10px auto."> <div class="row"> <.-- sidebar. which will move to the top on a small screen --> <.-- main content area --> <div class="col-sm-3"> <nav id="toc" class="affix toc-nav" data-spy="affix" data-toggle="toc"></nav> </div> <div class="col-sm-9"> <.-- <div id="menu1" > --> <div class="col-sm-9"> <div class="pbox releasenote"> <h1 class="text-center" id="release-note">Release Note</h1> <h1>0.1,4 (2020-07-06)</h1> <ul> <li>Fixed install package from test server via command line.</li> <li>Setup tool is able to include icon.</li> <li>Read package file from archive format whl and gz file.</li> <li>Flexiable Package icon.png or,icon</li> <li>Link with tab by link NEWS,rst or CHANGELOG.md.</li> <li>Fixed reverse package push record and package record.</li> <li>Data clean up on server test. production or both.</li> </ul> <h1>0.1.3 (2020-07-01)</h1> <ul> <li>Fixed error package push on reverse record.</li> <li>Change browser title, icon, and update footer,</li> <li>Fixed error on URL Project when user does not follow our pre-formate in setup.py file.</li> <li>Add field PkgVersion to table MKT_PKG_ACCESS_DE to filter package by version</li> <li>Able to use ALL keyword in version grant package access to all version.</li> </ul> <h1>0.1.2 (2020-06-26)</h1> <ul> <li>Update tab title to Morakot Private Package</li> <li>Add package platform in user activity</li> <li>Download now is classified by version and platform </li> <li>User in Morakot Organization and in Test server default can access all pacakge in test server</li> </ul> <h1>0.1.1 (2020-06-21)</h1> <ul> <li>Cut branch dev from master</li> <li>Add Modules. forms and models</li> <li>Adding host. port. http type as configuration</li> <li>Adding install and upload instructions</li> <li>Update pip install command line.</li> <li>Add new widget new release.</li> <li>Update user activity to sort by date descending.</li> <li>Package user in release history.</li> </ul> <h1>0.1.0 (2020-01-01)</h1> <ul> <li>Initial project first version</li> </ul> <h1>0.1,4 (2020-07-06)</h1> <ul> <li>Fixed install package from test server via command line.</li> <li>Setup tool is able to include icon.</li> <li>Read package file from archive format whl and gz file.</li> <li>Flexiable Package icon.png or,icon</li> <li>Link with tab by link NEWS,rst or CHANGELOG.md.</li> <li>Fixed reverse package push record and package record.</li> <li>Data clean up on server test. production or both.</li> </ul> <h1>0.1.3 (2020-07-01)</h1> <ul> <li>Fixed error package push on reverse record.</li> <li>Change browser title, icon, and update footer,</li> <li>Fixed error on URL Project when user does not follow our pre-formate in setup.py file.</li> <li>Add field PkgVersion to table MKT_PKG_ACCESS_DE to filter package by version</li> <li>Able to use ALL keyword in version grant package access to all version.</li> </ul> <h1>0.1.2 (2020-06-26)</h1> <ul> <li>Update tab title to Morakot Private Package</li> <li>Add package platform in user activity</li> <li>Download now is classified by version and platform </li> <li>User in Morakot Organization and in Test server default can access all pacakge in test server</li> </ul> <h1>0.1.1 (2020-06-21)</h1> <ul> <li>Cut branch dev from master</li> <li>Add Modules, forms and models</li> <li>Adding host, port, http type as configuration</li> <li>Adding install and upload instructions</li> <li>Update pip install command line.</li> <li>Add new widget new release.</li> <li>Update user activity to sort by date descending.</li> <li>Package user in release history.</li> </ul> <h1>0.1.0 (2020-01-01)</h1> <ul> <li>Initial project first version</li> </ul> </div> </div> <!-- </div> tab 2 --> <!-- /End Tab --> </div> </div> </div>
最后但并非最不重要的一点是，我要感谢@Will ，唯一一位参与我的问题的人。 希望这对其他人有帮助。 :)
jQuery-在没有固定位置的情况下滚动窗口时防止滚动元素
[英]jQuery - Prevent scroll element when window scrolled without fix position
jQuery计算项目在可滚动窗口中的位置并滚动到它
[英]jQuery calculate position of item in scrollable window and scroll to it
如何使用 window.scroll 与水平滚动来获取元素 position
[英]How to use window.scroll with horizontal scroll to get element position
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.