I was working on a site and needed to have a side nav stick to the top once the header was scrolled off the screen. \u00a0Positioning it is easy enough on page load, but I wanted to move it with window scroll.<\/p>\n
First I generated the div with theside nav items in it. \u00a0Positioned it fixed with a right of 0 and a top of my header height of 200px;<\/p>\n
Then came the window scroll javascript. \u00a0The concept is pretty simple, so I was able to get it to work with this code:<\/p>\n
[code language=”javascript”]
\n(function($) {
\n\t$(document).ready( function() {
\n\t\tif ($(this).scrollTop() < 200) {
\n $(".side-nav").css({ "position": "fixed", "top": 200 – $(this).scrollTop() + "px" });
\n } else {
\n $(".side-nav").css({ "position": "fixed", "top": "0px" });
\n }<\/p>\n
\t\t$(window).scroll(function() {
\n\t\t\tif ($(this).scrollTop() < 200) {
\n\t\t\t\t$(".side-nav").css({ "position": "fixed", "top": 200 – $(this).scrollTop() + "px" });
\n\t\t\t} else {
\n\t\t\t\t$(".side-nav").css({ "position": "fixed", "top": "0px" });
\n\t\t\t}
\n\t\t});
\n\t});
\n})(jQuery);
\n[\/code]<\/p>\n
A flushed out example of this can be seen at: I was working on a site and needed to have a side nav stick to the top once the header was scrolled off the screen. \u00a0Positioning it is easy enough… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.evermoretechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/215"}],"collection":[{"href":"https:\/\/www.evermoretechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.evermoretechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.evermoretechnologies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.evermoretechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=215"}],"version-history":[{"count":0,"href":"https:\/\/www.evermoretechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/215\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.evermoretechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.evermoretechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.evermoretechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n http:\/\/jsfiddle.net\/evermoretech\/wChGd\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"