Question

I have a floating column menu on my page, it works and looks great but I need to modify it a little but can t work out how.

文字是:

var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
    menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
    $(window).scroll(function () { 
        offset = menuYloc+$(document).scrollTop()+"px";
        $(name).animate({top:offset},{duration:1000,queue:false});
    });
});

基本食品标准是:

#floatMenu { position:relative; width:285px; top:0px; left:0px; }

目前,随着我上下页,1次晚,菜单把一页倒倒,但当它到达时,则在纸浆中,该元素距离最初的窗口顶。例如,在页数上,浮标是指离顶308px。当我开始缩编时,浮动因素在任何时候都保持308皮克。

Is it possible to modify this script, so the floating menu is always 20px from the top of my window when I scroll down?

Answer 1

See http://jsfiddle.net/mblase75/uEkSq/4/

I added some code that computes whether floatMenu s default position is larger than the scrollTop.

var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function() {
    menuYloc = $("#floatMenu").offset().top;
    $(window).scroll(function() {
        offset = Math.max(menuYloc,$(document).scrollTop()+20);
        $(name).animate({
            top: offset
        }, {
            duration: 1000,
            queue: false
        });
    });
});

友情链接