绝对位置居于首位的菜单

Question

jQuery

$(document).ready(function() {  
var offset = $(".menu").offset();  

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

        if (offset.top < scrollTop) {
            $(".menu").css({
                position: "fixed"
            });  
        }
        else {
            $(".menu").css({
                position: "absolute"
            });  
        }
    });  
});  

CSS

.menu {
  position: absolute;
  top: 0px;
  right: 0px;
}

As you imagine my menu always stays on top when scrolling down. But there is a catch here. My menu is positioned absolutely because it is located inside a large relative container div. However if I wish for the menu to stay on top I have to change the positioning to fixed, which all works fine but menu now gets displaced outside of the large container div! Is there a way to position my menu to always stay on top but to retain its absolute value? I really want that menu in one place, this means top:0 and right container border also 0!

Nothing moves outside of the central container and top is always 0.

Fiddle link: http://jsfiddle.net/t6nue/2/

Answer 1

You need to remove comma:

if (offset.top < scrollTop) {
   $(".menu").css({
      position: "fixed"//, //here no need to use comma
   });

Answer 2

I fixed the problem of jumping menu button like so:

jQuery

$(document).ready(function() {  
var offset = $(".menu").offset();  

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

        if (offset.top < scrollTop) {
           $(".menu").css({
                top: scrollTop - "8"
            });  
        }
        else {
            $(".menu").css({
                top: "0px"
            });  
        }
    });  
}); 

Notice I declare top position with jQuery variable: top: scrollTop - "8"

Problem solved :)