I have a page contain a fixed position of Table of Content,and a long text under neath banner image.
On window scroll event, my table of content leaves a lot of space from the top. 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. But it does not work.
$(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>My js to fix my table of content top margin is here but seem it does not work.
/* 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);
}
});
Any tip how can I achieve this purpose? Thanks.
