放置一个将是html格式的粘性导航_Html

放置一个将是html格式的粘性导航

html

放置一个将是html格式的粘性导航,html,Html,我的目标是先显示横幅图片，然后显示导航菜单，当滚动到屏幕顶部时，它会粘在屏幕顶部。此外，当滚动并粘贴在顶部时，站点徽标将首先与横幅图片重叠，并显示在导航栏上我的问题是在html中把导航部分放在哪里。是否应将其移动到标题部分？（在这种情况下，最初在css中定位它的最佳方式是什么，因为有一个图片元素具有多个响应的img源标记？）或者它应该停留在现在的位置，让标题部分被删除或包装导航 <body> <header> ..... </header>

我的目标是先显示横幅图片，然后显示导航菜单，当

滚动到屏幕顶部时，它会粘在屏幕顶部。此外，当滚动

并粘贴在顶部时，

站点徽标将首先与横幅图片重叠，并显示在导航栏上
我的问题是在html中把导航部分放在哪里。是否应将其移动到标题部分？（在这种情况下，最初在css中定位它的最佳方式是什么，因为有一个图片元素具有多个响应的img源标记？）或者它应该停留在现在的位置，让标题部分被删除或包装导航
<body>
  <header>

     .....
  </header>

  <div role="banner">
    <picture>
    </picture>
    <div role="site-logo"></div>
  </div>

  <nav role="navigation menu">
    <ul>
    </ul>
  </nav>
</body>


.....


来自
CSS
.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}

JQUERY
$(document).ready(function() {
  //change the integers below to match the height of your upper dive, which I called
  //banner.  Just add a 1 to the last number.  console.log($(window).scrollTop())
  //to figure out what the scroll position is when exactly you want to fix the nav
  //bar or div or whatever.  I stuck in the console.log for you.  Just remove when
  //you know the position.
  $(window).scroll(function () { 

    console.log($(window).scrollTop());

    if ($(window).scrollTop() > 550) {
      $('nav').addClass('navbar-fixed');
    }

    if ($(window).scrollTop() < 551) {
      $('nav').removeClass('navbar-fixed');
    }
  });
});

$（文档）.ready（函数（）{
//更改下面的整数以匹配我调用的上俯冲高度
//banner.只需将1添加到最后一个number.console.log（$（window.scrollTop（））
//要准确确定导航时的滚动位置
//bar或div之类的。我为你在console.log中卡住了。只要在
//你知道这个职位。
$（窗口）。滚动（函数（）{
log（$（window.scrollTop（））；
如果（$（窗口）.scrollTop（）>550）{
$（'nav'）.addClass（'navbar-fixed'）；
}
if（$（窗口）.scrollTop（）<551）{
$（'nav'）.removeClass（'navbar-fixed'）；
}
});
});
在粘贴nav
之前，您需要javascript或jquery来计算滚动。如果nav
位于最上面，并且已经粘贴，这将很容易