使用jQuery（）浮動DIV

朋友你好我設計了一個浮動DIV和它完美的工作，但由於一些原因，我不希望在我的代碼使用position:relative或position:absolute使用jQuery（）浮動DIV

$(window).scroll(function() { 

     var topWindowPosition = $(window).scrollTop(); 
     var leftWindowPosition = $(window).scrollLeft(); 
     var topLeftNavHeight = 200; 
     if (topWindowPosition >= topLeftNavHeight) { 
      $("#scroll").css({ top: topWindowPosition - topLeftNavHeight, left: 0, position: 'relative' }); 
     } else { 
      $("#scroll").css({ top: 0, left: 0, position: 'relative' }); 
     } 
     $("#scroll").forceRedraw(); 
    });

，你也可以看到工作演示這裏

http://jsfiddle.net/9E225/1/

我可以做同樣的效果，而無需使用位置，請幫助我。

在此先感謝

來源

2012-04-04 Kamal

當然，僅僅使用margins代替positions。例如：

if (topWindowPosition >= topLeftNavHeight) { 
    $("#scroll").css({ marginTop: topWindowPosition - topLeftNavHeight, marginLeft: 0}); 
} else { 
    $("#scroll").css({ marginTop: 0, marginLeft: 0 }); 
}

的jsfiddle：http://jsfiddle.net/9E225/2/

來源

2012-04-04 11:22:22

我會張貼相同的。雖然'marginLeft'並不是真的需要。 – keystorm 2012-04-04 11:23:16

哈哈我剛剛編輯了現有的jsFiddle，不知道他是否有其他用途。如果沒有，那麼@Kamal你可以刪除marginLeft :) – 2012-04-04 11:25:02

非常感謝你的生活救星:) – Kamal 2012-04-04 11:25:55

我不知道你是怎麼想的辦法做。當它超出滾動條元素時，它將元素卡入到位，並在其返回時立即對齊。這種方法的主要優點在於，您的#scroll元素不會「跳躍」回去，並在每次觸發的滾動事件中重新定位自己。

Example |代碼

var $el = $("#scroll"); 
var original_top = $el.position().top; 

$(window).scroll(function() { 
    //Scrolled past element 
    if($(window).scrollTop() >= original_top){ 
     //Add hooked element, if it's not already hooked 
     if(!$el.hasClass("hooked")) $el.addClass("hooked"); 
    }else if($(window).scrollTop() <= original_top){ 
     //Scrolled up before element, remove hooking and return back to normal 
     if($el.hasClass("hooked")) $el.removeClass("hooked"); 
    } 
});

CSS

.hooked{ 
    position: fixed; 
    top: 0; 
    left: 0; 
}

另外，我建議考慮看看this "JQuery Waypoints" library。它的運行方式與上面的代碼相同，但功能更多。 :)

來源

2012-04-04 11:34:44 ShadowScripter

使用jQuery（）浮動DIV

回答

相關問題