停止相对div滚动超过特定点

Question

How can I stop relative divs scrolling past a certain point?

Here's a fiddle to help you understand

Basically, I want to be able to scroll as normal, the only difference being is I don't want to see anything behind the header tag, ie as it stands when you scroll, you can see the divs through the header tag, I want it so when it scrolls, the cut off point is the bottom of the header tag so when scrolling you won't see anything past the header line.

Hope that makes sense.

Here's the header css

#header {
  height:40px;
  width:100%;
  background:transparent;
  position:fixed;
  border:1px solid black;
  top:0;
}

Answer 1

您可以为标题设置（非transparent ） background-color ，或在标题下方创建一个新的滚动区域，并产生overflow: scroll/auto

Answer 2

You use jquery scrollTop for this

 $(window).scroll(function(){
    if($(window).scrollTop() >= 229){
      alert("in if");
      $('#header').css({position:'relative'});
    }else{
      alert("in else");
      $('#header').css({position:'fixed'});
    }
});

Fiddle

Answer 3

just modify the css for #header as follows :

background: white;

This happens because you have made the background transparent.

for scrolling you can add following jQuery:

var windw = this;

$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $(windw);

    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('#header').followTo(250);