JQuery fixed floating sidebar Implementation ideas and code _ jquery-js tutorial

If the page is relatively high, when the scroll bar is dragged to the bottom of the page, a fixed DIV box following the browser appears on the sidebar, below we will share with you the ideas and specific implementations of this function, which is now widely used. If the page is relatively high, when the scroll bar is dragged below the page, the Sidebar displays a fixed DIV box that follows the browser. The idea is as follows: first obtain the distance from the DIV to the top of the page, and then judge, when the distance between the browser scrolling is greater than the distance between the DIV itself and the top, add the CSS attribute fixed.

The Code is as follows:

HTML code:

header
Sidebar
Main
footer

CSS code:

body {margin: 10px auto;font-family: sans-serif;width: 500px;}p {border-radius: 5px;box-shadow: 1px 2px 5px rgba(0,0,0,0.3);border: 1px solid #ccc;padding: 5px;}#sidebarWrap {height: 400px;width: 210px;float: right;position: relative;box-shadow: none;border: none;margin: 0;padding: 0;}#main {width: 270px;height: 4000px;}#footer {clear: both;margin: 10px 0;}#sidebar {width: 200px;height: 300px;position: absolute;}#header {height: 200px;margin-bottom: 10px;}#sidebar.fixed {position: fixed;top: 0;}#footer { height: 600px; }#footer { height: 600px; }

JavaScript code:

$(function() {var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));var maxY = footTop - $('#sidebar').outerHeight();$(window).scroll(function(evt) {var y = $(this).scrollTop();if (y > top) {if (y < maxY) {$('#sidebar').addClass('fixed').removeAttr('style');} else {$('#sidebar').removeClass('fixed').css({position: 'absolute',top: (maxY - top) + 'px'});}} else {$('#sidebar').removeClass('fixed');}});});