Jquery 滚动调整导航大小_Jquery_Html_Css

Jquery 滚动调整导航大小

jquery html css

Jquery 滚动调整导航大小,jquery,html,css,Jquery,Html,Css,我是个新手，我正在尝试让我的导航条在滚动时收缩-如果它是粘性的，并且在滚动超过某个点时可以拾取正文标题徽标，这将是一个加号，但这不是必需的问题是我尝试了几种jquery脚本方法；有些人已经完全调整了内部div的大小，该div包含logo和intro文本，应该是完整的页面（一页导航）。无论如何，没有一个脚本实际调整了导航栏的大小我希望有人能帮忙 <body class="homepage">  <div cla

我是个新手，我正在尝试让我的导航条在滚动时收缩-如果它是粘性的，并且在滚动超过某个点时可以拾取正文标题徽标，这将是一个加号，但这不是必需的

问题是我尝试了几种jquery脚本方法；有些人已经完全调整了内部div的大小，该div包含logo和intro文本，应该是完整的页面（一页导航）。无论如何，没有一个脚本实际调整了导航栏的大小

我希望有人能帮忙

<body class="homepage">
    <!-- Header -->
        <div class id="header">

            <!-- Inner -->
                <div class="inner">
                    <header>
                        <h1><a href="#" id="logo"><img src="../../Desktop/YourCare-White.png"></a></h1>
                        <hr />
                        <span class="byline">Take Back Your Health.</span>
                    </header>
                    <footer>
                        <a href="#banner" class="button circled scrolly">it's time</a>
                    </footer>
                </div>

            <!-- Nav -->
          <header class="navheader">
            <div class="nav-container">
                <p class="logo">
                <a href="index.html"><img src="../YourCare-White-Logo.png"></a>
              </p>
                <nav id="nav">
                    <ul>
                        <li>
                            <span>Dropdown</span>
                            <ul>
                                <li><a href="#">Lorem ipsum dolor</a></li>
                                <li><a href="#">Magna phasellus</a></li>
                                <li><a href="#">Etiam dolore nisl</a></li>
                                <li>
                                    <span>And a submenu &hellip;</span>
                                    <ul>
                                        <li><a href="#">Lorem ipsum dolor</a></li>
                                        <li><a href="#">Phasellus consequat</a></li>
                                        <li><a href="#">Magna phasellus</a></li>
                                        <li><a href="#">Etiam dolore nisl</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Veroeros feugiat</a></li>
                            </ul>
                        </li>
                        <li><a href="left-sidebar.html">Left Sidebar</a></li>
                        <li><a href="right-sidebar.html">Right Sidebar</a></li>
                        <li><a href="http://yourcare.me/join"></a>+ the Movement</li>
                    </ul>
                </nav>
            </div>
          </header>
        </div>

使用jQuery

$(document).ready(function() {
    $(window).scroll(function() {
        if($(window).scrollTop() > 7)
        {
         document.getElementById("topp").className += " resizeing";
        }
        else
        {
            document.getElementById("topp").className = "navheader";
        }
    });
});

我编辑了你的代码。查看以下内容：

但需要一点改变，但我没有机会

我不知道该怎么做，因为您没有共享所有代码，但基本思想是：

<head>
<script src="code.jquery.com/jquery.min.js"></script>
<style> ... </style>
<script>
//approximate, edit to your specification
pos=up
$("#content").scroll(function(){
     if($(this).scrollTop() > 5 /*or some comparably small number*/ && pos == up) {
          $("#old").fadeOut(100,function() {
               $("#new").fadeIn(100)
               pos=down
          });
          $("#header").animate({
               //new css
          },100);
     } else if ($(this).scrollTop() < 5 && pos == down) {
          $("#new").fadeOut(100,function() {
               $("#old").fadeIn(100)
               pos=up
          });
          $("#header").animate({
               //old css
          },100);
     }
});
</script>
</head>
<body class="homepage">
<div id="header">
     <div id="old"> ... </div> <!--The bigger header-->
     <div id="new" style="display:none;"> ... </div> <!--What you want on scroll-->
</div>
<div id="content"> ... </div>
</body>


... 
//近似，根据您的规格进行编辑
向上
$（“#内容”）。滚动（函数（）{
if（$（this）.scrollTop（）>5/*或一些相对较小的数字*/&&pos==up）{
$（“#旧”）.fadeOut（100，function（）{
$（“#新”）.fadeIn（100）
pos=向下
});
$（“#标题”）。设置动画({
//新css
},100);
}else if（$（this）.scrollTop（）<5&&pos==down）{
$（“#新”）.fadeOut（100，function（）{
$（“#旧”）.fadeIn（100）
向上
});
$（“#标题”）。设置动画({
//旧css
},100);
}
});
...  
...  
...

我使用

pos

变量，这样它就不会同时尝试最大化和最小化标题。

您想要一个粘性导航栏，还是一个经过某个点调整大小的导航栏，或者两者都要？我实际上在寻找两者-导航栏将调整大小，然后在内部div中拾取徽标，调整大小，滚动时向左浮动为什么将

document.getElementById

与jQuery一起使用？@RichardA我认为jQuery需要

scrollTop（）

$（'#topp'）.addClass（'resizeing'）

？这非常有效，谢谢！我可能需要添加一些填充，因为徽标朝底部浮动，但它在所有浏览器中都能很好地工作-在移动环境中，什么是jquery来隐藏导航栏？

<head>
<script src="code.jquery.com/jquery.min.js"></script>
<style> ... </style>
<script>
//approximate, edit to your specification
pos=up
$("#content").scroll(function(){
     if($(this).scrollTop() > 5 /*or some comparably small number*/ && pos == up) {
          $("#old").fadeOut(100,function() {
               $("#new").fadeIn(100)
               pos=down
          });
          $("#header").animate({
               //new css
          },100);
     } else if ($(this).scrollTop() < 5 && pos == down) {
          $("#new").fadeOut(100,function() {
               $("#old").fadeIn(100)
               pos=up
          });
          $("#header").animate({
               //old css
          },100);
     }
});
</script>
</head>
<body class="homepage">
<div id="header">
     <div id="old"> ... </div> <!--The bigger header-->
     <div id="new" style="display:none;"> ... </div> <!--What you want on scroll-->
</div>
<div id="content"> ... </div>
</body>