[英]Element that is fixed at bottom of browser until it hits the bottom of a div
[英]Fixed position menu when scrolling until it hits the bottom of a relative container
您可以嘗試執行以下操作: little link 。
這是JavaScript的注釋版本:(注意:這使用jQuery,但這不是必需的。如果您需要純JavaScript版本,我很樂意提供一些提示)
var oritop = -100;
$(window).scroll(function() { //on scroll,
var scrollt = window.scrollY; //get the amount of scrolling
var elm = $(".box"); //get the box we want to make sticky
if(oritop < 0) {
oritop= elm.offset().top; //cache the original top offset
}
if(scrollt >= oritop) { //if you scrolled past it,
elm.css({"position": "fixed", "top": 0, "left": 0}); //make it sticky
}
else { //otherwise
elm.css("position", "static"); //reset it to default positioning
}
});
您可以通過標記選定的項目來做到這一點。
滾動時將菜單置於絕對位置並標記所選項目的功能:
jQuery(window).scroll(function () {
console.log(jQuery(window).scrollTop());
// x = jQuery("html").scrollTop();
x = jQuery(window).scrollTop(); // corrigindo bug do chome
/* Item marcado de acordo com a rolagem */
switch (true) {
case (x >= 600 && x < 2500): // ajuste aqui a area
jQuery('.coluna-222-right a').removeClass('ativo');
jQuery('.coluna-222-right a.programacao').addClass('ativo');
break;
case (x >= 2500 && x < 5000):
jQuery('.coluna-222-right a').removeClass('ativo'); // ajuste aqui a area
jQuery('.coluna-222-right a.palestrantes').addClass('ativo');
break;
case (x >= 5000 && x < 5765):
jQuery('.coluna-222-right a').removeClass('ativo'); // ajuste aqui a area
jQuery('.coluna-222-right a.local').addClass('ativo');
break;
}
if (x>40) {
jQuery(".coluna-222-right ul").css("position","absolute");
jQuery(".coluna-222-right ul").css("top",x+20); // ajuste aqui a posição do menu, pode usar - ao invés de +
}
else {
jQuery(".coluna-222-right ul").css("position","static");
jQuery(".coluna-222-right ul").css("top","0");
}
});
檢查單擊的項目:
jQuery("a").click(function () {
jQuery("a").removeClass("ativo");
jQuery(this).addClass("ativo");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.