jquery - Sticky Header, Up to a point -


I have a square "sticky" that is being added to a div, when it reaches the top of the page, It changes CSS status fixed.

When the user reaches the bottom of that part of the page, I want to remove the sticky class.

That header is only relevant to any part of the page.

>

Any ideas about how to add to my existing code

  & lt; Script & gt; $ (Document) .ready (function () {var stickyNavTop = $ ('.header'). Offset;) top stickyNav = function {var scrollTop = $ (window) .scrollTop (); if (scrollTop ($. 'Header'). $ ('Header') AddClass ('sticky');} and {$ ('header'). Removeclass ('sticky');}}; sticky (); $ ( Window) scroll (function () {sticky ();}}}}}; & lt; / script & gt;  

Use this function to calculate scrolling to reach

I

Added container when The header is changed to code> therefore the height of the document is the same

the document height < / Code> - window height which will give value when scrolling reaches the previous area

  function scrolling () {doc = $ (document) .height () Win = $ (window) .height () height = doc - win if ($ (window) .scrollTop () & gt; = Height) {$ ('header'). RemoveClass ('sticky'); $ ('Container'). CSS ('padding-top', '0'); }}  

edit

scrolling div and comes to the address to find out the function Has been changed and

> Focus scrolling () {Doctor = $ (document) .high () hidingtop = $ ('hidden'). Offset (). Top; Top ($. 'Hidden') External Hate (true) if ($ (window) .scrollTop () & gt; Hide Desktop & amp; $ (Window) Scrolltop () & lt; Hidden Tumblr) {$ ('. Header'). RemoveClass ('Sticky'); $ ('Container'). CSS ('padding-top', '0'); }}


Comments

Popular posts from this blog

winforms - C# Form - Property Change -

java - Messages from .properties file do not display UTF-8 characters -

javascript - amcharts makechart not working -