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
Post a Comment