使導航事業部出現在向下滾動

我想一個div在頂部出現時，用戶向下滾動通稱爲.header1一個div類（這div有內3個其他分區）使導航事業部出現在向下滾動

我希望出現在了導航.fixedDiv。我找到了我的答案here，但我一直無法在我的網站上實現它。這裏是我得到

<script type="text/javascript"> 
    var startY = $('.header1').position().top + $('.header1').outerHeight(); 
    $(window).scroll(function() { 
     if($(this).scrollTop() > startY){ 
      $('.fixedDiv').slideDown(); 
     }else{ 
      $('.fixedDiv').slideUp(); 
     } 
    }); 
</script>

而且我有一個div我的網站上說topnav稱爲.fixedDiv，我的問題是div是永遠存在的。它向下滾動時不隱藏或出現。

This是一個鏈接到我的網站。

對於CSS我沒有設置.header1，因爲其他div在裏面，它們應該是.fixedDiv出現所需的高度。而.fixedDiv有CSS

.fixedDiv { 
    position:fixed; 
    top:0px; 
    left:0px; 
    background:orange; 
}

我知道我接近得到這個工作，但我似乎無法找出什麼我失蹤。

來源

2012-12-27 Philippe Allaire

所以終於想通了，我喜歡它，它看起來很棒

jQuery(document).ready(function() { 
var startY= jQuery('.header1').position().top + jQuery('.header1').outerHeight(); 
jQuery('.fixedDiv').html(jQuery('#nav').html()); 
jQuery(window).scroll(function() { 
    if(jQuery(this).scrollTop() > startY){ 
     jQuery('.fixedDiv').slideDown(); 
    }else{ 
     jQuery('.fixedDiv').slideUp(); 
    } 
}); 
});

不知道什麼多餘的線（3號線）做但什麼是丟失... 謝謝

來源

2012-12-28 04:28:56

測試$(".header1").position()給出TypeError: undefined is not a function。

由於WordPress，你似乎在noConflict mode。

試試這個：

jQuery(document).ready(function($) { 
    var startY= $('.header1').position().top + $('.header1').outerHeight(); 
    $(window).scroll(function() { 
     if($(this).scrollTop() > startY){ 
      $('.fixedDiv').slideDown(); 
     }else{ 
      $('.fixedDiv').slideUp(); 
     } 
    }); 
});

編輯：你有一個額外<script>標籤（至少鉻看到它）。它似乎在Firefox中正常工作。

enter image description here

來源

2012-12-27 03:59:47 irrelephant

UMM我試過你提到的，但它沒有影響... –

有沒有辦法改變WordPress模式？ –

@PhilippeAllaire你在你的網站上缺少'.top'。（它是'startY = jQuery（「。header1」）。position（）。top + ...'）您還需要將該行下面的其他'$'s更改爲'jQuery'。 – irrelephant

爲什麼不直接使用淡入淡出，並在使用setInterval上滾動？沿着線的東西...

.scroll(function() 
{ 
    if($(".fixedDiv").css('display', 'none')) 
    { 
     $(".fixedDiv").fadeIn("normal", function() 
     { 
      setInterval(function() { $(".fixedDiv").fadeOut("normal"); }, 1500); 
     }); 
    } 
}

來源

2012-12-27 04:10:11

這是行不通的，因爲WordPress的是在noconflict模式？ –

從我的理解，如果你的WordPress的是在非衝突模式比你可以使用jQuery（選擇器），而不是$（選擇器）。 – 2012-12-27 07:06:59

使導航事業部出現在向下滾動

回答

相關問題