Floating Fixed Sidebar

Developer
James Barnett
Size
2,857 Kb
Views
22,264
  1. Floating Fixed Sidebar Previews
  2. Floating Fixed Sidebar HTML Codes
  3. Floating Fixed Sidebar CSS Codes
  4. Floating Fixed Sidebar JS Codes

How do I make an floating fixed sidebar?

A floating fixed sidebar using the technique from http://jqueryfordesigners.com/fixed-floating-elements/. What is a floating fixed sidebar? How do you make a floating fixed sidebar? This script and codes were developed by James Barnett on 11 August 2022, Thursday.

Floating Fixed Sidebar Previews
IQ Test

Floating Fixed Sidebar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Floating Fixed Sidebar</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class ="nav"></div> <div class="sidebar"></div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis diam sed risus aliquet, in vestibulum neque lacinia. Ut nec consequat dolor. Aenean venenatis justo nec sagittis lacinia. Quisque metus tortor, porta quis nulla sit amet, dictum facilisis orci. Quisque ipsum dui, feugiat a lorem venenatis, interdum porttitor lacus. Sed ac augue vitae tellus fringilla tincidunt. In id ultrices erat. Vestibulum ut suscipit massa, ac pulvinar erat. Duis in accumsan eros. Ut elementum accumsan libero consectetur scelerisque. Mauris ut turpis id nibh iaculis egestas eget ornare risus. Donec justo tellus, rutrum et euismod eleifend, eleifend vel augue. Quisque vulputate mi ut ante aliquet, ut molestie orci rutrum. Donec molestie, mauris vitae accumsan venenatis, felis turpis tempor erat, sit amet euismod est dui vel libero. Nunc sed turpis nec ipsum tristique porta.
Ut viverra sollicitudin velit. Fusce ac ante ac nunc posuere tempus. Aenean aliquet lacus arcu, id tristique lacus tempor at. In vel enim dolor. Sed sed sem quam. Pellentesque scelerisque malesuada quam in tempus. Pellentesque commodo vestibulum varius. Suspendisse in sollicitudin magna. Aenean condimentum, quam non rhoncus hendrerit, augue augue cursus nulla, ut commodo dolor justo in orci. Vivamus auctor vitae dolor at porttitor. Praesent euismod pellentesque sollicitudin. Phasellus blandit adipiscing dictum. Etiam hendrerit scelerisque quam nec suscipit. Mauris elit orci, facilisis ut fermentum ac, consequat vel nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis diam sed risus aliquet, in vestibulum neque lacinia. Ut nec consequat dolor. Aenean venenatis justo nec sagittis lacinia. Quisque metus tortor, porta quis nulla sit amet, dictum facilisis orci. Quisque ipsum dui, feugiat a lorem venenatis, interdum porttitor lacus. Sed ac augue vitae tellus fringilla tincidunt. In id ultrices erat. Vestibulum ut suscipit massa, ac pulvinar erat. Duis in accumsan eros. Ut elementum accumsan libero consectetur scelerisque. Mauris ut turpis id nibh iaculis egestas eget ornare risus. Donec justo tellus, rutrum et euismod eleifend, eleifend vel augue. Quisque vulputate mi ut ante aliquet, ut molestie orci rutrum. Donec molestie, mauris vitae accumsan venenatis, felis turpis tempor erat, sit amet euismod est dui vel libero. Nunc sed turpis nec ipsum tristique porta.
Ut viverra sollicitudin velit. Fusce ac ante ac nunc posuere tempus. Aenean aliquet lacus arcu, id tristique lacus tempor at. In vel enim dolor. Sed sed sem quam. Pellentesque scelerisque malesuada quam in tempus. Pellentesque commodo vestibulum varius. Suspendisse in sollicitudin magna. Aenean condimentum, quam non rhoncus hendrerit, augue augue cursus nulla, ut commodo dolor justo in orci. Vivamus auctor vitae dolor at porttitor. Praesent euismod pellentesque sollicitudin. Phasellus blandit adipiscing dictum. Etiam hendrerit scelerisque quam nec suscipit. Mauris elit orci, facilisis ut fermentum ac, consequat vel nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis diam sed risus aliquet, in vestibulum neque lacinia. Ut nec consequat dolor. Aenean venenatis justo nec sagittis lacinia. Quisque metus tortor, porta quis nulla sit amet, dictum facilisis orci. Quisque ipsum dui, feugiat a lorem venenatis, interdum porttitor lacus. Sed ac augue vitae tellus fringilla tincidunt. In id ultrices erat. Vestibulum ut suscipit massa, ac pulvinar erat. Duis in accumsan eros. Ut elementum accumsan libero consectetur scelerisque. Mauris ut turpis id nibh iaculis egestas eget ornare risus. Donec justo tellus, rutrum et euismod eleifend, eleifend vel augue. Quisque vulputate mi ut ante aliquet, ut molestie orci rutrum. Donec molestie, mauris vitae accumsan venenatis, felis turpis tempor erat, sit amet euismod est dui vel libero. Nunc sed turpis nec ipsum tristique porta.
Ut viverra sollicitudin velit. Fusce ac ante ac nunc posuere tempus. Aenean aliquet lacus arcu, id tristique lacus tempor at. In vel enim dolor. Sed sed sem quam. Pellentesque scelerisque malesuada quam in tempus. Pellentesque commodo vestibulum varius. Suspendisse in sollicitudin magna. Aenean condimentum, quam non rhoncus hendrerit, augue augue cursus nulla, ut commodo dolor justo in orci. Vivamus auctor vitae dolor at porttitor. Praesent euismod pellentesque sollicitudin. Phasellus blandit adipiscing dictum. Etiam hendrerit scelerisque quam nec suscipit. Mauris elit orci, facilisis ut fermentum ac, consequat vel nisl. </p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Floating Fixed Sidebar - Script Codes CSS Codes

/*** basic page layout ***/
* { box-sizing: border-box; }
body { margin: 20px; }
.nav { width: 100%; border: blue 2px solid; height: 50px;
}
.content { float: right; width: 600px; border: 2px solid green;
}
.content p { margin: 10px 15px; }
/*** sidebar ***/
.sidebar { width: 300px; float: left; border: 2px solid orange; height: 400px;
}
/* top margin on sidebar needed for JS to parse */
.sidebar, .content { margin-top: 20px; }
/* fixed sidebar applied dynamtically with JS */
.fixed { position: fixed; top: 0; }

Floating Fixed Sidebar - Script Codes JS Codes

/* JavaScript from: http://jqueryfordesigners.com/fixed-floating-elements/ */
$(function () { var sidebar = $('.sidebar'); var top = sidebar.offset().top - parseFloat(sidebar.css('margin-top')); $(window).scroll(function (event) { var y = $(this).scrollTop(); if (y >= top) { sidebar.addClass('fixed'); } else { sidebar.removeClass('fixed'); } });
});
Floating Fixed Sidebar - Script Codes
Floating Fixed Sidebar - Script Codes
Home Page Home
Developer James Barnett
Username jamesbarnett
Uploaded August 11, 2022
Rating 3
Size 2,857 Kb
Views 22,264
Do you need developer help for Floating Fixed Sidebar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Barnett (jamesbarnett) Script Codes
Name
Ready to Launch
CSS3 Image Wall
CSS speech bubble
Pure CSS Star Rating Widget
Piet Mondrian Composition II
List.js Demo
Console.log output in codepen
Custom select box
Search field
Simple CSS Checkboxes with Font Awesome
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!