Question

我找到了一个我想使用的导航布局，但我似乎遇到了两个问题。

问题＃1 当向上或向下滚动时，css中的过渡似乎没有顺利过渡。

问题＃2 如果滚动位置不为零我不希望mainnav收缩，我希望当我向上或向下滚动时顶部导航显示或隐藏..这很难说出来我想要完成的是以下

https://www.battlefield.com/games/battlefield-4/classes

现在当你向下滚动它隐藏顶部导航但是如果你每个方向滚动一点点它将显示或隐藏我正在尝试做什么..但我不希望第二个导航按比例缩小，除非顶部是0

＆＃13;

$(window).scroll(function() {

  if ($(this).scrollTop() > 0) {
    $('.netnav').addClass('hide-nav');
    $('.netnav').removeClass('show-nav');
    $('.mainnav').addClass('scrolled');
   } 
   else {
    $('.netnav').addClass('show-nav');
    $('.netnav').removeClass('hide-nav');
    $('.mainnav').removeClass('scrolled');
   }
   
});

＆＃13;

body {
  margin: 0px;
}

.hwrap {
  display: block;
  position: fixed;
  width: 100%;
}

.netnav {
  position: fixed;
  height: 40px;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: blue;
  z-index: 1;
}

.netnav.show-nav {
  top: 0;
  transition-duration: .4s;
}

.netnav.hide-nav {
  transform: translate3d(0, -40px, 0);
  transition-duration: .4s;
}

.mainnav {
  position: fixed;
  height: 68px;
  z-index: 3;
  background: blue;
}

.mainnav {
  border-radius: 4px;
  left: auto;
  margin: 0 auto;
  top: 50px;
  position: relative;
  transform: translateY(15px);
  transition: transform .3s, width .3s;
  width: calc(100% - 60px);
}

.mainnav.scrolled {
  top: 0;
  height: 60px;
  border-radius: 0;
  transform: translateY(0);
  width: 100%;
  transition: transform .3s, width .3s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="hwrap">
  <div class="netnav">net nav</div>
  <div class="mainnav">main nav</div>
</header>

<div style="height: 100vh; display: block; background-color: gold">about</div>
<div style="height: 100vh; display: block; background-color: green">about</div>

＆＃13;

Answer 1

演示

http://jsfiddle.net/gos4hwp9/52/

说明

添加了transition: all ease-in-out .4s，以实现所有属性的平滑过渡
如果scrollTop > 0将margin: 0px和border-radius: 0px添加到了底部（主要）导航，则Else使margin和border-radius与初始状态相同
如果scrollDir == "down"向translateY(-50px)添加了header，则其他删除了translateY
移动整个标头将同时移动两个导航，与单独移动它们相比，这很不错

Answer 2

我稍微改变了你的过渡，并为你切换的类添加了过渡。

body {
    margin: 0px;
}

.hwrap {
    display: block;
    position: fixed;
    width: 100%;
}

.netnav {
    position: fixed;
    height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: blue;
    z-index: 1;
    transition: .3s all;
}

.netnav.show-nav {
    top: 0;
    transition: .3s all;
}

.netnav.hide-nav {
    transform: translate3d(0, -40px, 0);
    transition: .3s all;
}

.mainnav {
    position: fixed;
    height: 68px;
    z-index: 3;
    background: blue;
}

.mainnav {
    border-radius: 4px;
    left: auto;
    margin: 0 auto;
    top: 50px;
    position: relative;

    transform: translateY(15px);
    transition: .3s all;
    width: calc(100% - 60px);
}

.mainnav.scrolled {
    top: 0;
    height: 60px;
    border-radius: 0;
    transform: translateY(0);
    width: 100%;
    transition: .3s all;
}

Answer 3

我按照您提供的链接编辑了JavaScript和CSS。

修复了使用JavaScript向上或向下滚动时在转换中看起来不顺畅的CSS转换。

您可以根据自己的代码段访问我编辑过的pen，然后使用它。

        $(window).scroll(function(){

        if ($(this).scrollTop() > 15) {
           $('.netnav').addClass('hide-nav');
           $('.netnav').removeClass('show-nav');
           $('.mainnav').addClass('RemoveTop');
        }
        else {
           $('.netnav').addClass('show-nav');
           $('.netnav').removeClass('hide-nav');
           $('.mainnav').removeClass('RemoveTop');
           $('.mainnav').removeClass('scrolled');  
        }
    });

    $(window).scroll(function(){

        if ($(this).scrollTop() > 50) {
           $('.mainnav').addClass('scrolled');
        }
        else {
           $('.netnav').removeClass('scrolled'); 
        }
    });

        body {
        margin: 0px;
    }


    .hwrap{
      display:block;
      position: fixed;
      width: 100%;
    }


    .netnav{		
      position: fixed;
      height: 40px;
      width: 100%;	
      margin: 0;
      padding: 0;
      background-color: blue;
      transition: all .3s;
      z-index: 1;
    }

    .netnav.show-nav {	
      top: 0;
      transition-duration: .4s;
    }

    .netnav.hide-nav {
      transform: translate3d(0,-40px,0);
      transition-duration: .4s;
    }

    .mainnav{
      position: fixed;
      height: 68px;	
      z-index: 3;
      background: blue;
    }

    .mainnav {
        border-radius: 4px;
        left: auto;
        margin: 0 auto;
        top: 50px;
        position: relative;
        transform: translateY(15px);
        transition: all .3s,width .3s;
        width: calc(100% - 60px);
    }

    .mainnav.RemoveTop {
      top: 0px;
    }


    .mainnav.scrolled {	
      height: 60px;
      border-radius: 0;
      transform: translateY(0);
      width: 100%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<header class="hwrap">
	<div class="netnav">net nav</div>
	<div class="mainnav">main nav</div>
	</header>
	
	<div style="height: 100vh; display: block; background-color: gold">about</div>
	<div style="height: 100vh; display: block; background-color: green">about</div>

隐藏导航基于滚动删除添加类

3 个答案:

演示

说明