DIV nav在滚动过去的标题后出现 [英] DIV nav appear after scrolling past header

问题描述

我使用这个脚本来操作它：

  $（window）.load（function（）{
 //获取页面顶部的标题位置及其自身的高度
 
 $（window）.scroll（function（））
 $ start $ ='（'＃header'）。position（）。top + $（'＃header'）。outerHeight {
 checkY（）; 
}）; 
 
函数checkY（）{
 if（$（window）.scrollTop（）> startY）{
 $（'＃navbar'）。slideUp（）; 
} 
} $ b $（'＃navbar'）。slideDown（）; 
} else {
 
 $ b //为了防止用户在页面中间开始一半时执行此操作，
 checkY（）; 
}）; //]]> 
  

问题是scrip在加载时读取我的页眉高度，但是因为我的页眉高度为100 ％的视口，当调整窗口的大小时，导航显示为太迟或太早。

例如，用670像素高的视口加载页面，大小缩小到一个400像素的视口。我的标题缩小到400px高，即使te nav只出现在670px之后

有什么方法可以解决这个问题？
thanks

解决方案

试试这个：

  $（window）.on（load resize，function（e）{
 //获取页面顶部的标题位置及其自身的高度
 var startY = $（'＃header'）。position（）。top + $（'＃header'）。outerHeight（）; 
 
 $（window）.scroll（function（）{
）checkY（）; 
}）; 
 
函数checkY（）{
 if（$（window）.scrollTop（）> startY）{
 $（ '#navbar'）。slideDown（）; 
} else {
 $（'＃navbar'）。slideUp（）; 
} 
} 
 
 //为了防止用户在页面中间开始时加载，请执行此操作
 checkY（）; 
}）; //]]> 
  

这只是修改后的第一行（加载大小调整）。

I am designing a site with a sticky nav appearing after scrolling past the header.

I got this to work using this script:

$(window).load(function(){
// Get the headers position from the top of the page, plus its own height
var startY = $('#header').position().top + $('#header').outerHeight();

$(window).scroll(function(){
    checkY();
 });

function checkY(){
    if( $(window).scrollTop() > startY ){
        $('#navbar').slideDown();
    }else{
        $('#navbar').slideUp();
    }
}

 // Do this on load just in case the user starts half way down the page
 checkY();
 });//]]>  

The problem is the scrip reads the height of my header on load, but because my header height is 100% of the viewport, when one resizes the window, the nav appears either too late or too early.

For example loading the page with a 670px high viewport, sized down to a 400px viewport. My header shrinks along to 400px high, even though te nav only appears after 670px

any way to fix this? thanks

解决方案

Try this:

$(window).on("load resize",function(e){
    // Get the headers position from the top of the page, plus its own height
    var startY = $('#header').position().top + $('#header').outerHeight();

    $(window).scroll(function(){
        checkY();
    });

    function checkY(){
        if( $(window).scrollTop() > startY ){
            $('#navbar').slideDown();
        }else{
            $('#navbar').slideUp();
        }
    }

    // Do this on load just in case the user starts half way down the page
    checkY();
});//]]>

It's only the first line (on load resize) that is modified.

这篇关于DIV nav在滚动过去的标题后出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！