javascript - 在Jquery中的窗口滚动上将元素位置调整为0？
问题描述
我有一个页面包含固定位置的目录，以及整齐的横幅图像下的长文本。
在窗口滚动事件中，我的目录从顶部留下了很多空间。我试图做到这一点，我的目录部分，在窗口滚动时保持在位置 0，当窗口滚动在位置 0 时，我希望它正好位于横幅图像下方。但它不起作用。
$(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);
}
});
任何提示我怎样才能达到这个目的？谢谢。
解决方案
在花了几个小时寻找解决方案后，我从这里找到了解决方案密钥，并提出了我自己的：
$(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，唯一一位参与我的问题的人。希望这对其他人有帮助。:)
推荐阅读
- c++ - 与我自己的 Arduino 库相关的错误，用于从编码器读取值
- prometheus-operator - 如何为prometheus配置服务而不是每次都执行port-forward命令
- python - 是否有任何解决方案没有进口只是组合
- javascript - 单击后显示多个按钮的文本
- javascript - 在chartJs中添加多行作为Y轴标题
- python - 在 openpyxl 2.4.0 中删除一列
- c++ - 使用 'auto' 同时推断多种类型
- reactjs - Material-UI 选择替换为选择时的 selectedValue
- r - R - 如果条件为真，则将值从前一行更改为值
- lotus-notes - Lotus Notes 9 - 在日历中的搜索结果之间滚动时是否可以隐藏预览窗格？