3

ユーザーが下にスクロールしてdivクラスを渡すと、divが上部に表示されるようにします.header1(このdivには他の3つのdivが含まれています)

そこにナビを表示させたい.fixedDiv。ここで答えを見つけましたが、サイトに実装できませんでした。これが私が得たものです

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

そして.fixedDiv、私のサイトで topnav と呼ばれる div があります。私の問題は、div が常にそこにあることです。下にスクロールしても隠れたり現れたりしません。

これは私のウェブサイトへのリンクです。

css については.header1、他の div が内部にあり、表示するために必要な高さでなければならないため、何も設定していません.fixedDiv。そして.fixedDivcssを持っています

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

私はこれを機能させることに近づいていることを知っていますが、私が欠けているものを理解できないようです.

4

3 に答える 3

0

テスト$(".header1").position()するとTypeError: undefined is not a function。

WordPressが原因でnoConflictモードになっているようです。

代わりにこれを試してください：

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

編集：あなたは余分な<script>タグを持っています（少なくとも、Chromeはそれを認識しています）。Firefoxでは正常に動作しているようです。

ここに画像の説明を入力してください

于 2012-12-27T03:59:47.427 に答える
0

スクロール時にsetIntervalでfadeInとfadeOutを使用しないのはなぜですか? 線に沿った何か...

.scroll( function()
{
    if($(".fixedDiv").css('display', 'none'))
    {
        $(".fixedDiv").fadeIn("normal", function()
        {
            setInterval( function() { $(".fixedDiv").fadeOut("normal"); }, 1500 );
        });
    }
}
于 2012-12-27T04:10:11.390 に答える
0

ついにそれを理解しました、そして私はそれが大好きです、それは素晴らしく見えます

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-28T04:28:56.530 に答える