当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Jquery sticky side bar plugin not working

问题描述:

I just downloaded a jquery plugin. This jquery plugin enables the sidebar to follow as the user scrolls down the webpage. The sticky sidebar is still not scrolling. What could be the issue? I am quite new to jquery.. I seek your kind understanding. Please Help. Thank You.

Here is my code

 <title>Sofia's Personal Website</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">

<script src="modernizr.custom.62074.js"></script>

<link rel="stylesheet" href="AP2.css">

<script src="jquery-3.1.1.min.js"></script>

<script src="js/stickySidebar.js"></script> <!--side bar plugin-->

<script type="text/javascript" src="script.js"></script>

 <div class="container">

<nav class="nav-list"> <!--Navigation-->

<nav class="navigation-list-item">

<nav class="nav-list-item">

<p id="first"><a href="index.html"><img src="images/Home.png" width="68" height="39" alt="Text for navigation"/></a></p>

<p id="second"><a href="AboutMe.html"><img src="images/AboutMe.png" width="129" height="40" alt="Text for navigation"/></a></p>

<p id="third"><a href="ImportantPeople.html"><img src="images/ImportantPeople.png" width="242" height="39" alt="Text for navigation"/></a></p>

<p id="fourth"><a href="MyPortFolio.html"><img src="images/MyPortfolio.png" width="181" height="39" alt="Text for navigation"/></a></p>

<p id="fifth"><a href="ContactMe.html"><img src="images/ContactMe.png" width="160" height="40" alt="Text for navigation"/></a></p>

</nav>

</nav>

</nav>

<aside id="sidebar"> <!--Side Bar Navigation-->

<nav class="sidenav">

<nav class="sitenavitem">

<p id="snfirst"><a href="#H2inAll"><img src="images/Home.png" width="68" height="39" alt="Text for navigation"/></a></p>

<p id="snsecond"><a href="#H2inSecond"><img src="images/AboutMe.png" width="129" height="40" alt="Text for navigation"/></a></p>

<p id="snthird"><a href="#H2inThird"><img src="images/ImportantPeople.png" width="242" height="39" alt="Text for navigation"/></a></p>

</nav>

</nav>

</aside>

<script>

$(document).ready(function() { <!--calling the plugin-->

$('#sidebar').stickySidebar({

sidebarTopMargin: 20, // defines top margin from sidebar to navigation element (20px by default)

footerThreshold: 100 // defines a distance from footer (40px by default)

});

});

</script>

CSS

aside {

float: left;

width: 230px;

position: absolute;

margin-left: 28px;

}

.sidenav {

background-color: #6f4829;

padding: 10px;

border-radius: 4%;

}

#sidebar.sticky {

float: none;

position: fixed;

top: 25px;

z-index: 6;

left: auto;

}

Javascript file

 (function ( $ ) {

$.fn.stickySidebar = function( options ) {

var config = $.extend({

headerSelector: 'header',

navSelector: 'nav',

contentSelector: '#content',

footerSelector: 'footer',

sidebarTopMargin: 20,

footerThreshold: 40

}, options);

var fixSidebr = function() {

var sidebarSelector = $(this);

var viewportHeight = $(window).height();

var viewportWidth = $(window).width();

var documentHeight = $(document).height();

var headerHeight = $(config.headerSelector).outerHeight();

var navHeight = $(config.navSelector).outerHeight();

var sidebarHeight = sidebarSelector.outerHeight();

var contentHeight = $(config.contentSelector).outerHeight();

var footerHeight = $(config.footerSelector).outerHeight();

var scroll_top = $(window).scrollTop();

var fixPosition = contentHeight - sidebarHeight;

var breakingPoint1 = headerHeight + navHeight;

var breakingPoint2 = documentHeight - (sidebarHeight + footerHeight + config.footerThreshold);

// calculate

if ( (contentHeight > sidebarHeight) && (viewportHeight > sidebarHeight) ) {

if (scroll_top < breakingPoint1) {

sidebarSelector.removeClass('sticky');

} else if ((scroll_top >= breakingPoint1) && (scroll_top < breakingPoint2)) {

sidebarSelector.addClass('sticky').css('top', config.sidebarTopMargin);

} else {

var negative = breakingPoint2 - scroll_top;

sidebarSelector.addClass('sticky').css('top',negative);

}

}

};

return this.each( function() {

$(window).on('scroll', $.proxy(fixSidebr, this));

$(window).on('resize', $.proxy(fixSidebr, this))

$.proxy(fixSidebr, this)();

});

};

}( jQuery ));

I downloaded the plugin from

http://www.jqueryscript.net/layout/Creating-A-Fixed-Position-Sidebar-With-jQuery-Sticky-Sidebar-Plugin.html

分享给朋友:
您可能感兴趣的文章:
随机阅读: