Destramic Posted August 29, 2014 Share Posted August 29, 2014 hey guys im in a bit trouble trying to use window offset() function. basically i have a fixed header and what im trying to accomplish is for when the user scroll past a certain point the header content will change...im not sure if im going about this the right way or even sure if it is possible with a fixed header. any help would be grateful thank you <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <style type="text/css"> body{ margin:0px; background:#FFFFFF; } .header-cont { width:100%; position:fixed; top:0px; } .header { height:50px; background:#F0F0F0; border:1px solid #CCC; width:960px; margin:0px auto; } .content { width:960px; background: #F0F0F0; border: 1px solid #CCC; height: 2000px; margin: 70px auto; } </style> <script> $(window).scroll(function(){ var position = $('#position').offset().top; if ($(window).scrollTop() > position) { alert('hey'); // Change header content } }); </script> </head> <body> <div class="header-cont"> <div>FIXED HEADER</div> </div> <br /> <div id='position'></div> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> CONTENT HERE! </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/290739-offset/ Share on other sites More sharing options...
WebOutGateway Posted September 1, 2014 Share Posted September 1, 2014 Hi, Destramic! Referring to this: http://jsfiddle.net/gxRC9/502/ I just modified some things, you can paste this and try to see what happens in the demo: CSS: var stickyOffset = $('.sticky').offset().top; $(window).scroll(function(){ var sticky = $('.sticky'), scroll = $(window).scrollTop(); if (scroll >= stickyOffset) { sticky.addClass('fixed'); sticky.html("Hello There."); } }); Then try to add this in the HTML section to allow the scroll: <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <div>To scroll</div> Also, remove the <section> tags so that the position of the header is fixed. I hope this helps. Thank you. Quote Link to comment https://forums.phpfreaks.com/topic/290739-offset/#findComment-1489523 Share on other sites More sharing options...
Richard_Grant Posted September 8, 2014 Share Posted September 8, 2014 nononono... window.onscroll = function(){ scrollisAt(0,100, function(){ alert("at 100"); }); };function scrollTop(x,y,func){ var x_ = (window.pageXOffset || document.documentElement.scrollLeft) - (document.documentElement.clientLeft || 0); var y_ = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0); if(x == x && y==y){ func(x,y); } }; Quote Link to comment https://forums.phpfreaks.com/topic/290739-offset/#findComment-1490313 Share on other sites More sharing options...
Strider64 Posted September 9, 2014 Share Posted September 9, 2014 (edited) If you're using jQuery this is I how I do it: $(function() { $(window).scroll(function() { // Use Console.log to figure out your 'Sticking' point. // console.log($(window).scrollTop()) if ($(window).scrollTop() > 200) { $('.navigational-wrapper').addClass('navbar-fixed'); } if ($(window).scrollTop() < 201) { $('.navigational-wrapper').removeClass('navbar-fixed'); } }); }); // END MAIN JQUERY FUNCTION Edited September 9, 2014 by Strider64 Quote Link to comment https://forums.phpfreaks.com/topic/290739-offset/#findComment-1490440 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.