3

I am new to jquery and looking to make a div scroll up and fix at the top after i scroll down a particular position in the browser just like http://www.airbnb.com/jobs/

user1496872
  • 37
  • 2
  • 5
  • Wow, yeah that's nice... good luck, wouldn't have a clue where to start!! – freefaller Jul 24 '12 at 09:15
  • This is not exactly the same but almost on the same lines.. - http://stackoverflow.com/questions/9352419/fixed-header-transformation-when-page-is-scrolled/9352465#9352465 – Vivek Chandra Jul 24 '12 at 09:17
  • There are many [**jQuery Parallax type of scrolling plugins**](http://smashinghub.com/7-jquery-parallax-and-scrolling-effect-plugins.htm) that have powerful API to do many things. Here's a [**SO Answer**](http://stackoverflow.com/a/10967523/1195891) I wrote about that. – arttronics Jul 24 '12 at 10:17

4 Answers4

5

Try the following DEMO

This is along the same lines as my other answer( Answer ) with a few values changed. Native JS solution.

The code is:

JS : 

window.onscroll=function () {
var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
var head = document.getElementById("header")
if(top > 550){
    head.style.position = "fixed";
    head.style.height="50px"
    head.style.top="0px"
    }
    else {
if(head.getAttribute("style"))
 head.removeAttribute("style")                
    }
}

HTML:

<div class="container">
  <div id="header" class="header">
    Hello World
  </div>
</div>

CSS:

.container{
 height:2000px;
 width:100%;
 background-color:yellow;
}

.header{
 text-align:center;
 background-color:red;
 height:100px;
 position:relative;
 min-height:50px;
 width:100%;
 top:500px;
}

​

hope it helps

Community
  • 1
  • 1
Vivek Chandra
  • 4,240
  • 9
  • 33
  • 38
  • +1 from me, although one aspect that you haven't captured is that the amount of each picture showing changes as you scroll down (which is pretty). – Nick Jul 24 '12 at 09:38
4

Write like this:

$(window).scroll(function () {
                    var height = $('body').height();
                    var scrollTop = $(window).scrollTop();

                      if(scrollTop>500){
                          $('#header').css({ 'position': 'fixed', 'top' : '0' });
                    }
                      else{
                         $('#header').css({ 'position': 'relative', 'top': '500px'});
                       }
                });

Check this http://jsfiddle.net/68eXM/14/

sandeep
  • 91,313
  • 23
  • 137
  • 155
2

FIDDLE DEMO: http://jsfiddle.net/collabcoders/PZp8R/3/

Extending it to include the jquery animation you will need to include jquery, jquery.effects.core.min.js, jquery.effects.slide.min.js, and jquery.effects.transfer.min.js files.

In your CSS you'll want to off set the top margin of your div to a negative number which will be the starting point of your animation.

CSS

.tophead {  
    width:100%;
    height: 100px;
    color:#fff;
    background-color:#111;
}

.container {
    height:2000px;
    width:100%;
    margin-top:-100px;
}

.header{
    text-align:center;
    background-color:#000;
    height:100px;
    position:relative;
    min-height:100px;
    width:100%;
    top:500px;
    color: #fff;
}​

In your javascript this will animate the whole div from -100 px down to 0 in 3 seconds

Javascript

$(document).ready(function () {
    $(".container").animate({
         marginTop: "0"
    },2000);
});

$(window).scroll(function () {
    var height = $('body').height();
    var scrollTop = $(window).scrollTop();
    if(scrollTop>500){
         $('#header').css({ 'position': 'fixed', 'top' : '0' });
    } else {
         $('#header').css({ 'position': 'relative', 'top': '500px'});
   }
});

HTML

<div class="container">
    <div id="tophead" class="tophead">
      Sliding Down Container
    </div>
  <div id="header" class="header">
    Hello World
  </div>
</div>​
Johnny
  • 1,141
  • 9
  • 6
0

it's simple.. just like this example:

$(window).scroll(function () {
    var height = $('body').height();
    var scrollTop = $(window).scrollTop();
    if(scrollTop>100){
        $('#header').css({ 'position': 'fixed', 'top' : '0', 'opacity': '0.7'});
    } else {
         $('#header').css({ 'position': 'relative', 'top': '100px', 'opacity': '1'});
    }
});

http://jsfiddle.net/PZp8R/55/

Ahmad Seraj
  • 171
  • 1
  • 8