offset()

Destramic · 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>

WebOutGateway · 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.

Richard_Grant · 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);
}
};

Strider64 · September 9, 2014

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

Sign In

offset()

Recommended Posts

Destramic

Link to comment

Share on other sites

WebOutGateway

Link to comment

Share on other sites

Richard_Grant

Link to comment

Share on other sites

Strider64

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information