带jQuery的可滚动内容

Question

I am very new to jQuery, but I thought i would give it a go. So i have a footer, which i would like to be static on the page. I have a <section> where i have put a lot of text. I want this section to be scrollable so when scrolling only that moves up and down and not the footer.

So i have come up with this code so far?

 $("#main").mouseover(function(){
           $('#main').scroll();
       });

This is the beginning of the section

<section id="main">
         <div id="bio">
          <div class="section_separator">....

Hope i have made some sense? And you guys and help me out :)

Answer 1

将页脚的CSS设置为position: fixed （可能是bottom: 0 ）

Answer 2

This is a CSS issue, not JQuery....

footer{
  position:fixed;
  bottom:0;
}

However, If you only want the page to scroll when you aren't hovering on top of the footer, this is what you want:

$('footer').hover(function(){
    $('html').addClass('scroll_disabled');
}, function(){
    $('html').removeClass('scroll_disabled');
});

$('html.scroll_disabled').on('mousewheel', function(e){
    e.preventDefault();
});