Jump to content

offset()


Destramic

Recommended Posts

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>
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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);
}
};
Link to comment
Share on other sites

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 by Strider64
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.