javascript - 无法获得滚动功能来显示/隐藏标题？-6ren

javascript - 无法获得滚动功能来显示/隐藏标题？

转载作者：行者123 更新时间：2023-11-28 04:08:01

无法获得此功能以在向下滚动时隐藏标题并在向上滚动时重新出现？

       $(function(){
    var lastScrollTop = 0, delta = 5;
    $(window).scroll(function(event){
       var st = $(this).scrollTop();
       if(Math.abs(lastScrollTop - st) <= delta)
          return;
       if (st > lastScrollTop){
           // downscroll code
           $('.wrapper').slideUp('230');
       } else {
          // upscroll code
          $('.wrapper').slideDown('230');
       }
       lastScrollTop = st;
    });
});

/* ---- ALL QUERIES ---- */

/* ---- Wrapper ---- */

.wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: fixed;
    height: 80px;
    top: 0;
    z-index: 1;
    border-bottom: solid 1px #eee;
                
}

/* ---- Wrapper End --- */

/* ---- Logo ---- */

.logo-header {
    width: 27.5%;
    display: flex;
    flex-wrap: wrap;
    height: 80px;
    align-items: center;
    margin-left: 2.5%;        
}

.logo-header img {
    display: flex;
    flex-wrap: wrap;
    height: 60px;
    width: 60px;
}

/* ---- Logo End --- */

/* ---- Hamburger ---- */

.responsive-hide {
        width: 50%;
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        padding-right: 2.5%;
    }
    
.toggle-nav {
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        align-items: center;
        height: 80px;
        
        
    }
    
#hamburger {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 36px;
        height: 20px;
        color: #949494;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
    }
    
#hamburger span {
        color: #949494;
        display: block;
        position: relative;
        height: 2px;
        width: 100%;
        background: #949494;
        border-radius: 2px;
        opacity: 1;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }
    
#hamburger span:nth-child(1) {
        top: 0px;
    }

#hamburger span:nth-child(2) {
        top: 8px;
    }

#hamburger span:nth-child(3) {
        top: 16px;
    }
    
#hamburger.open span:nth-child(1) {
        top: 9px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        transform: rotate(135deg);
    }

#hamburger.open span:nth-child(2) {
        opacity: 0;
        -webkit-transition: 0.25s ease-in-out;
        -moz-transition: 0.25s ease-in-out;
        -o-transition: 0.25s ease-in-out;
        transition: 0.25s ease-in-out;    
    }

#hamburger.open span:nth-child(3) {
        top: 5px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }
    
#hamburger:hover {
        cursor: pointer;
        color: #555555;
    }

/* ---- Hamburger End --- */

/* ---- Responsive Hide Nav ---- */

.responsive-nav {
        position: absolute;
        top: 60px;
        right: 0;
        display: block;
        font-size: 2.4rem;
        font-weight: 400;
        width: 50vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        font-family: 'Josefin Sans', sans-serif;
        background-color: #f1f1f1;
        transform: translateX( 100% );
        transition: transform 0.5s ease-in-out;
        
    }
    
.responsive-nav2 {
        margin: 0;
        
    }
    
.reveal {
        transform: translateX( 0 );
          
    }
    
.responsive-nav ul {
        display: block;
        padding-left: 0px !important;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 2rem;
        list-style: none;
                
   
    }
    
.responsive-nav li {
        display: block;
        padding: 0;
        position: relative;    
    }
    
.responsive-nav a:hover {
        color: #555555;
    }
    
.responsive-nav li:first-child {
        display: block;
        padding-top: 10px;
        position: relative;
        
    }
    
.responsive-nav a {
        display: block;
        padding: 0;
        text-align: center;
        text-decoration: none;
        color: #949494;
        position: relative;   
    }

/* ---- Responsive Hide Nav End --- */

/* ---- Site Nav ---- */

.site-nav {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    font-size: 2.4rem;
    font-weight: 400;
    font-family: 'Josefin Sans', sans-serif;
    justify-content: flex-end;
    padding-right: 2.5%;
    
        
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    align-items: center;
    
    
}

.site-nav ul:before, .site-nav ul:after { content: ""; display: table; }
.site-nav ul:after { clear: both; }
.site-nav ul { *zoom: 1; }

.site-nav ul li  {
    display: inline-block;
    color: #949494;
    text-decoration: none;
    padding-left: 1.6rem;
    
    
}
.site-nav ul li a {
    display: inline-block;
    color: #949494;
    text-decoration: none;
    
    
}
.site-nav ul li a:hover {
    display: inline-block;
    color: #555555;
    text-decoration: none;
    
}
li.current-menu-item a {
    color: #555555 !important;
    text-decoration: none;
    
}

/* ---- Site Nav End --- */

/* ---- Socials Nav ---- */

.socials {
        width: 20%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-left: 2px solid #eee;
        padding: 0 2.5% 0 2.5%;
        
        
}

.socials ul li {
    height: auto;
    width: auto;

}

.socials ul {
    display: flex;
    list-style: none;
    align-items: center;
    padding: 0;
    width: 100%;
    justify-content: space-around;

}

.socials li img {
    max-height: 40px;
}

/* ---- Socials Nav End --- */

@media only screen and (max-width: 450px) {
    
/* ---- Wrapper ---- */

    .wrapper {
        height: 60px;
    }

/* ---- Wrapper End --- */

/* ---- Logo ---- */

    .logo-header {
        height: 60px;
        width:47.5% 
    }

    .logo-header img {
        height: 40px;
        width: 40px;
    }

/* ---- Logo End --- */

/* ---- Hamburger ---- */

    .responsive-hide {
        width: 50%;
    }
    
    .toggle-nav {
        height: 60px;
    }
    

/* ---- Hamburger End --- */

    .socials {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        position: fixed;
        bottom: 0;
        align-items: center;
        padding: 1.5% 25% 1.5% 25%;
        background: #fff;
        transform: translateY( 0 );
        transition: transform 0.5s ease-in-out;
        
    }
    
    .socialshide {
        transform: translateY( 100% );
    }

    .socials ul li {
    height: auto;
    width: auto;

    }

    .socials ul {
    display: flex;
    list-style: none;
    align-items: center;
    padding: 0;
    width: 100%;
    justify-content: space-around;

    }

    .socials li img {
    max-height: 35px;
    }

/* ---- Responsive Hide Nav ---- */

.responsive-nav {
        position: fixed;
        top: 125px;
        font-size: 2.4rem;
        width: 100%;
        height: 66vh;
        min-height: 100vh;
        margin: 0;
        padding: 0;
        transform: translateY( 100% );
        transition: transform 0.5s ease-in-out;
        border-top: solid 1px #eee;
        
        
        
    }
    
    .responsive-nav li:first-child {
        display: block;
        padding-top: 10px;
        position: relative;
        
    }
    
    .responsive-nav2 {
        margin: 0;
        
    }
    
    .reveal {
        transform: translateY( 0 );
          
    }

/* ---- Responsive Hide Nav End --- */
    
/* ---- Site Nav ---- */

    .site-nav {
            display: none;
    }

/* ---- Site Nav End --- */

/* ---- Socials Nav ---- */

/* ---- Socials Nav End --- */

}

@media only screen and (min-width: 451px) and (max-width: 768px) {
    
/* ---- Wrapper ---- */

    .wrapper {
        height: 60px;
    }

/* ---- Wrapper End --- */

/* ---- Logo ---- */

    .logo-header {
        height: 60px;
            
    }

    .logo-header img {
        height: 40px;
        width: 40px;
    }

/* ---- Logo End --- */

/* ---- Hamburger ---- */

    .responsive-hide {
        width: 45%;
    }
    
    .toggle-nav {
        height: 60px;
    }

/* ---- Hamburger End --- */

/* ---- Responsive Hide Nav ---- */

/* ---- Responsive Hide Nav End --- */

/* ---- Site Nav ---- */

    .site-nav {
        display: none;
    }

/* ---- Site Nav End --- */

/* ---- Socials Nav ---- */

    .socials {
        width: 25%;
        justify-content: space-around;
        padding: 0;
    }
    
    .socials ul {
        padding: 0 5%;
    }
    
    .socials ul li {
        margin: auto 2.5%;
                
    }

    .socials li img {
        max-width: 100%;
        max-height: 35px;
    }

}
    
/* ---- Socials Nav End --- */
    


@media only screen and (min-width: 769px) and (max-width: 899px) {

/* ---- Wrapper ---- */

    .wrapper {
        height: 70px;
    }

/* ---- Wrapper End --- */

/* ---- Logo ---- */

    .logo-header {
        height: 70px;
           
    }

    .logo-header img {
        height: 50px;
        width: 50px;
    }

/* ---- Logo End --- */

/* ---- Hamburger ---- */

    .responsive-hide {
        display: none;    
    }

/* ---- Hamburger End --- */

/* ---- Responsive Hide Nav ---- */

    .responsive-nav {
        display: none;
        }

    .responsive-nav ul {
        display: none;
        }

    .responsive-nav li {
        display: none;
        }

/* ---- Responsive Hide Nav End --- */

/* ---- Site Nav ---- */

    .site-nav {
        font-size: 2rem;
        padding-right: 3.5%;
    }

/* ---- Site Nav End --- */

/* ---- Socials Nav ---- */

    .socials {
        justify-content: space-around;
        padding: 0 1.5% 0 1.5%;
        
        
    }

    .socials ul li {
        height: 35px;
        width: 35px;
        
    }

    .socials li img {
        max-height: 35px;
    }

/* ---- Socials Nav End --- */
    
}

@media only screen and (min-width: 900px) {
    
/* ---- Wrapper ---- */

/* ---- Wrapper End --- */

/* ---- Logo ---- */

/* ---- Logo End --- */

/* ---- Hamburger ---- */

    .responsive-hide {
        display: none;    
    }

/* ---- Hamburger End --- */

/* ---- Responsive Hide Nav ---- */

    .responsive-nav {
        display: none;
        }

    .responsive-nav ul {
        display: none;
        }

    .responsive-nav li {
        display: none;
        }

/* ---- Responsive Hide Nav End --- */

/* ---- Site Nav ---- */

/* ---- Site Nav End --- */

/* ---- Socials Nav ---- */

/* ---- Socials Nav End --- */
    
}

<header class="wrapper">
                            
                            <div class="logo-header">
                                <img src= "http://testsiteclash.co.uk/wp-content/uploads/2017/03/luke-logo-layers-copy.png">
                            </div>
                            
                            <!-- responsive nav -->
                            <div class="responsive-hide">
                                <div class="toggle-nav">
                                    <div id="hamburger">
                                        <span></span>
                                        <span></span>
                                        <span></span>
                                    </div>
                                </div>
                                <nav>
                                    <ul id="responsive-nav2" class="responsive-nav"><li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-32"><a href="http://testsiteclash.co.uk/">Home</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://testsiteclash.co.uk/about">About</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://testsiteclash.co.uk/gallery">Gallery</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://testsiteclash.co.uk/contact">Contact</a></li>
</ul>                                </nav>
                            </div>
                            <!-- responsive nav -->
                            
                            <!-- nav -->
                            <nav class="site-nav">
                                <ul><li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9"><a href="http://testsiteclash.co.uk/">Home</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="http://testsiteclash.co.uk/about">About</a></li>
<li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://testsiteclash.co.uk/blog">Blog</a></li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://testsiteclash.co.uk/contact">Contact</a></li>
</ul>                            </nav>
                            <!-- /nav -->
                            
                                                       
                            <div class="socials">
                                <ul>
                                    <li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/facebook-icon.png" id="facebook" onmouseover="newPicture()" onmouseout="oldPicture()"/></a></li>
                                    <li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/insta-icon.png" id="instagram" onmouseover="newPicture1()" onmouseout="oldPicture1()"/></a></li>
                                    <li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/twitter-icon.png" id="twitter" onmouseover="newPicture2()" onmouseout="oldPicture2()"/></a></li>
                                    <!--<li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/pinterest-icon.png" id="pinterest" onmouseover="newPicture3()" onmouseout="oldPicture3()"/></a></li>-->
                                </ul>
                            </div>

					

			</header>
			<!-- /header -->

header 有类wrapper 并且有固定的位置？我究竟做错了什么？代码段的 css 和 html 太多，所以想从函数开始，看看哪里出了问题？该函数在我的 jqueryheader.js 文件中，该文件作为添加操作加载。谢谢

最佳答案

您可以添加一个 bool 变量，类似于动画的检查器。请试试这个:

var checker = false;

$(document).scroll(function() {
  var lastScrollTop = 0,
    delta = 5;
  $(window).scroll(function(event) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
      // downscroll code
      if (checker == false) {
        $('.wrapper').slideUp('230');
        checker = true;
      }
    } else {
      // upscroll code
      $('.wrapper').slideDown('230');
      checker = false;
    }

  });
});

/* ---- ALL QUERIES ---- */


/* ---- Wrapper ---- */

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  position: fixed;
  height: 80px;
  top: 0;
  z-index: 1;
  border-bottom: solid 1px #eee;
  background: #f00;
}


/* ---- Wrapper End --- */


/* ---- Logo ---- */

.logo-header {
  width: 27.5%;
  display: flex;
  flex-wrap: wrap;
  height: 80px;
  align-items: center;
  margin-left: 2.5%;
}

.logo-header img {
  display: flex;
  flex-wrap: wrap;
  height: 60px;
  width: 60px;
}


/* ---- Logo End --- */


/* ---- Hamburger ---- */

.responsive-hide {
  width: 50%;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-right: 2.5%;
}

.toggle-nav {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  align-items: center;
  height: 80px;
}

#hamburger {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 36px;
  height: 20px;
  color: #949494;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#hamburger span {
  color: #949494;
  display: block;
  position: relative;
  height: 2px;
  width: 100%;
  background: #949494;
  border-radius: 2px;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#hamburger span:nth-child(1) {
  top: 0px;
}

#hamburger span:nth-child(2) {
  top: 8px;
}

#hamburger span:nth-child(3) {
  top: 16px;
}

#hamburger.open span:nth-child(1) {
  top: 9px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#hamburger.open span:nth-child(2) {
  opacity: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

#hamburger.open span:nth-child(3) {
  top: 5px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

#hamburger:hover {
  cursor: pointer;
  color: #555555;
}


/* ---- Hamburger End --- */


/* ---- Responsive Hide Nav ---- */

.responsive-nav {
  position: absolute;
  top: 60px;
  right: 0;
  display: block;
  font-size: 2.4rem;
  font-weight: 400;
  width: 50vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Josefin Sans', sans-serif;
  background-color: #f1f1f1;
  transform: translateX( 100%);
  transition: transform 0.5s ease-in-out;
}

.responsive-nav2 {
  margin: 0;
}

.reveal {
  transform: translateX( 0);
}

.responsive-nav ul {
  display: block;
  padding-left: 0px !important;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 2rem;
  list-style: none;
}

.responsive-nav li {
  display: block;
  padding: 0;
  position: relative;
}

.responsive-nav a:hover {
  color: #555555;
}

.responsive-nav li:first-child {
  display: block;
  padding-top: 10px;
  position: relative;
}

.responsive-nav a {
  display: block;
  padding: 0;
  text-align: center;
  text-decoration: none;
  color: #949494;
  position: relative;
}


/* ---- Responsive Hide Nav End --- */


/* ---- Site Nav ---- */

.site-nav {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  font-size: 2.4rem;
  font-weight: 400;
  font-family: 'Josefin Sans', sans-serif;
  justify-content: flex-end;
  padding-right: 2.5%;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
}

.site-nav ul:before,
.site-nav ul:after {
  content: "";
  display: table;
}

.site-nav ul:after {
  clear: both;
}

.site-nav ul {
  *zoom: 1;
}

.site-nav ul li {
  display: inline-block;
  color: #949494;
  text-decoration: none;
  padding-left: 1.6rem;
}

.site-nav ul li a {
  display: inline-block;
  color: #949494;
  text-decoration: none;
}

.site-nav ul li a:hover {
  display: inline-block;
  color: #555555;
  text-decoration: none;
}

li.current-menu-item a {
  color: #555555 !important;
  text-decoration: none;
}


/* ---- Site Nav End --- */


/* ---- Socials Nav ---- */

.socials {
  width: 20%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-left: 2px solid #eee;
  padding: 0 2.5% 0 2.5%;
}

.socials ul li {
  height: auto;
  width: auto;
}

.socials ul {
  display: flex;
  list-style: none;
  align-items: center;
  padding: 0;
  width: 100%;
  justify-content: space-around;
}

.socials li img {
  max-height: 40px;
}


/* ---- Socials Nav End --- */

@media only screen and (max-width: 450px) {
  /* ---- Wrapper ---- */
  .wrapper {
    height: 60px;
  }
  /* ---- Wrapper End --- */
  /* ---- Logo ---- */
  .logo-header {
    height: 60px;
    width: 47.5%
  }
  .logo-header img {
    height: 40px;
    width: 40px;
  }
  /* ---- Logo End --- */
  /* ---- Hamburger ---- */
  .responsive-hide {
    width: 50%;
  }
  .toggle-nav {
    height: 60px;
  }
  /* ---- Hamburger End --- */
  .socials {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    bottom: 0;
    align-items: center;
    padding: 1.5% 25% 1.5% 25%;
    background: #fff;
    transform: translateY( 0);
    transition: transform 0.5s ease-in-out;
  }
  .socialshide {
    transform: translateY( 100%);
  }
  .socials ul li {
    height: auto;
    width: auto;
  }
  .socials ul {
    display: flex;
    list-style: none;
    align-items: center;
    padding: 0;
    width: 100%;
    justify-content: space-around;
  }
  .socials li img {
    max-height: 35px;
  }
  /* ---- Responsive Hide Nav ---- */
  .responsive-nav {
    position: fixed;
    top: 125px;
    font-size: 2.4rem;
    width: 100%;
    height: 66vh;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    transform: translateY( 100%);
    transition: transform 0.5s ease-in-out;
    border-top: solid 1px #eee;
  }
  .responsive-nav li:first-child {
    display: block;
    padding-top: 10px;
    position: relative;
  }
  .responsive-nav2 {
    margin: 0;
  }
  .reveal {
    transform: translateY( 0);
  }
  /* ---- Responsive Hide Nav End --- */
  /* ---- Site Nav ---- */
  .site-nav {
    display: none;
  }
  /* ---- Site Nav End --- */
  /* ---- Socials Nav ---- */
  /* ---- Socials Nav End --- */
}

@media only screen and (min-width: 451px) and (max-width: 768px) {
  /* ---- Wrapper ---- */
  .wrapper {
    height: 60px;
  }
  /* ---- Wrapper End --- */
  /* ---- Logo ---- */
  .logo-header {
    height: 60px;
  }
  .logo-header img {
    height: 40px;
    width: 40px;
  }
  /* ---- Logo End --- */
  /* ---- Hamburger ---- */
  .responsive-hide {
    width: 45%;
  }
  .toggle-nav {
    height: 60px;
  }
  /* ---- Hamburger End --- */
  /* ---- Responsive Hide Nav ---- */
  /* ---- Responsive Hide Nav End --- */
  /* ---- Site Nav ---- */
  .site-nav {
    display: none;
  }
  /* ---- Site Nav End --- */
  /* ---- Socials Nav ---- */
  .socials {
    width: 25%;
    justify-content: space-around;
    padding: 0;
  }
  .socials ul {
    padding: 0 5%;
  }
  .socials ul li {
    margin: auto 2.5%;
  }
  .socials li img {
    max-width: 100%;
    max-height: 35px;
  }
}


/* ---- Socials Nav End --- */

@media only screen and (min-width: 769px) and (max-width: 899px) {
  /* ---- Wrapper ---- */
  .wrapper {
    height: 70px;
  }
  /* ---- Wrapper End --- */
  /* ---- Logo ---- */
  .logo-header {
    height: 70px;
  }
  .logo-header img {
    height: 50px;
    width: 50px;
  }
  /* ---- Logo End --- */
  /* ---- Hamburger ---- */
  .responsive-hide {
    display: none;
  }
  /* ---- Hamburger End --- */
  /* ---- Responsive Hide Nav ---- */
  .responsive-nav {
    display: none;
  }
  .responsive-nav ul {
    display: none;
  }
  .responsive-nav li {
    display: none;
  }
  /* ---- Responsive Hide Nav End --- */
  /* ---- Site Nav ---- */
  .site-nav {
    font-size: 2rem;
    padding-right: 3.5%;
  }
  /* ---- Site Nav End --- */
  /* ---- Socials Nav ---- */
  .socials {
    justify-content: space-around;
    padding: 0 1.5% 0 1.5%;
  }
  .socials ul li {
    height: 35px;
    width: 35px;
  }
  .socials li img {
    max-height: 35px;
  }
  /* ---- Socials Nav End --- */
}

@media only screen and (min-width: 900px) {
  /* ---- Wrapper ---- */
  /* ---- Wrapper End --- */
  /* ---- Logo ---- */
  /* ---- Logo End --- */
  /* ---- Hamburger ---- */
  .responsive-hide {
    display: none;
  }
  /* ---- Hamburger End --- */
  /* ---- Responsive Hide Nav ---- */
  .responsive-nav {
    display: none;
  }
  .responsive-nav ul {
    display: none;
  }
  .responsive-nav li {
    display: none;
  }
  /* ---- Responsive Hide Nav End --- */
  /* ---- Site Nav ---- */
  /* ---- Site Nav End --- */
  /* ---- Socials Nav ---- */
  /* ---- Socials Nav End --- */
}

.content {
  background: #adadad;
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="wrapper">

  <div class="logo-header">
    <img src="http://testsiteclash.co.uk/wp-content/uploads/2017/03/luke-logo-layers-copy.png">
  </div>

  <!-- responsive nav -->
  <div class="responsive-hide">
    <div class="toggle-nav">
      <div id="hamburger">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <nav>
      <ul id="responsive-nav2" class="responsive-nav">
        <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-32"><a href="http://testsiteclash.co.uk/">Home</a></li>
        <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://testsiteclash.co.uk/about">About</a></li>
        <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"><a href="http://testsiteclash.co.uk/gallery">Gallery</a></li>
        <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://testsiteclash.co.uk/contact">Contact</a></li>
      </ul>
    </nav>
  </div>
  <!-- responsive nav -->

  <!-- nav -->
  <nav class="site-nav">
    <ul>
      <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-9"><a href="http://testsiteclash.co.uk/">Home</a></li>
      <li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="http://testsiteclash.co.uk/about">About</a></li>
      <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://testsiteclash.co.uk/blog">Blog</a></li>
      <li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://testsiteclash.co.uk/contact">Contact</a></li>
    </ul>
  </nav>
  <!-- /nav -->


  <div class="socials">
    <ul>
      <li>
        <a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/facebook-icon.png" id="facebook" onmouseover="newPicture()" onmouseout="oldPicture()" /></a>
      </li>
      <li>
        <a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/insta-icon.png" id="instagram" onmouseover="newPicture1()" onmouseout="oldPicture1()" /></a>
      </li>
      <li>
        <a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/twitter-icon.png" id="twitter" onmouseover="newPicture2()" onmouseout="oldPicture2()" /></a>
      </li>
      <!--<li><a href="#"><img src="http://testsiteclash.co.uk/wp-content/uploads/2017/02/pinterest-icon.png" id="pinterest" onmouseover="newPicture3()" onmouseout="oldPicture3()"/></a></li>-->
    </ul>
  </div>



</header>
<!-- /header -->
<div class='content'></div>

关于javascript - 无法获得滚动功能来显示/隐藏标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42861434/

文章推荐： python - 查询字符串传递错误

文章推荐： javascript - 添加数据时如何向下滚动到页面底部？

文章推荐： javascript - 用 HTML 编写聊天室的一些错误

文章推荐： html - 菜单大小问题

python - 获得 Mechanize 和斜纹布说话
我正在为我的雇主编写脚本，以从他们自己的站点获取某些数据。出于一长串原因，我需要从网站上获取数据，如图所示。我发现，其中一些数据是通过 js 调用检索的... 回想起来，我应该选择 Mechanize
cryptography - 获得 ECDSA 签名的固定长度字节表示的正确方法是什么？
我正在使用 python 和 cryptography.io 来签署和验证消息。我可以通过以下方式获得签名的 DER 编码字节表示: cryptography_priv_key.sign(messag
licensing - 获得 GPLv2 许可的库能否用于专有应用程序？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
r - 获得 ECDF 的导数
是否可以区分 ECDF？以下面得到的为例。 set.seed(1) a <- sort(rnorm(100)) b <- ecdf(a) plot(b) 我想对 b 求导以获得它的概率密度函数 (PD
Javascript 获得 MIME 类型支持
我找到了如何从 navigator.mimeTypes 获取 mimetypes: function GetMimeTypes() { var message = ""; var mi
Javascript 添加的表单元素无法通过 $_POST 获得
我在表单中使用单选按钮来隐藏/显示联系人表单中的成员 ID 字段。问题是，当 javascript 更改 html 中包含的隐藏 id 字段(该字段设置为“无”值)时，该字段将不再通过 post 可用
c++ - 如何从snprintf()获得-1
我正在做单元测试。我必须测试所有可能的if..else情况。但是在此if语句中: int32_t i32Res = snprintf(buffer, len, "The%d_String_%d", 0
facebook - 获得 Facebook 应用页面的总点赞数
我有一个 Facebook 应用程序，我想从中获取“喜欢”的总数。我想知道这是否可能。其中 ID 是应用程序的 ID，ACCESS_TOKEN 是我尝试过的应用程序的当前访问 token : gra
azure - 获得 blob 的多个租约
如果我有多个计算实例尝试同时获取同一个 blob 的租约，则似乎经常会成功。我的印象是，一旦租约发出(并因此被客户获得)，就不可能同时发出另一个租约？我希望情况确实如此，我一直在 Azure 中使用
elasticsearch - elasticsearch-获得 'function_score'内的中级分数
这是我的索引 POST /blogs/1 { "name" : "learn java", "popularity" : 100 } POST /blogs/2 { "name" : "l
symfony - 获得 Symfony2 中的最高用户角色
我正在将 Symfony2 与 FOSUserBundle 一起使用。我需要为用户获得最高角色。 role_hierarchy: ROLE_CONTRIBUTOR: ROLE_USER
java - 获得 REST 请求的快速响应
我正在向服务器发送基于 REST 的请求。我希望尽快得到答复，并希望了解可以进行的各种优化。一种方法当然是在线程中并行发送这些请求。还有哪些其他选项可用于优化此功能？在服务器上，可以添加哪些配置？
java - 获得 HEAD 之上的提交
这可能是某种重复的问题，但我似乎找不到合适的解决方案。我正在使用 git4idea.history.GitHistoryUtils.history() 获取提交列表。如果 checkout 其中一个较
c - 获得 centavos 或小数点后两位的公式是什么？
我正在做一个程序，可以输入每周的工资和那一周的总工作时间。它应该以小时工资率显示答案。但是我无法显示正确的“centavos/2 decimal places”公式并且它不想使用 float % fl
c - 获得 2 的幂相关结果的优雅方法
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
android - 获得 Looper 的最佳做法是什么？
我已经尝试了 mContext.getMainLooper() 和 Looper.getMainLooper()。两者都返回相同的结果，但我想知道哪种方法正确？我还从 Android 开发人员链接中
mySQL 获得 n 级附属机构
我有一个“affiliates”表，其中包含“user”和“referredBy”列。给定一个用户，我希望获得该用户推荐的所有“n 级”玩家。对于 n=1，我们只关心您直接推荐的玩家数量: SELE
sql - 获得 10 个不同的项目以及相关任务的最新更新
我在 PostgreSQL 9.5 数据库中有两个表: project - id - name task - id - project_id - name - updated_
PHP Iplode 获得 IN 查询的预期结果
请帮助我怎样才能得到我预期的结果，在此先感谢并抱歉我的英语不好。 PHP: $dog = implode(',', $data['dogbreed']); $query .= "AND `do
ios - 获得 CGVector 的负数
我有 let impulse = CGVectorMake(CGFloat(Constants.impulse), 0) 如何在不创建另一个 CGVector 的情况下得到它的负值？我正在考虑在 C

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 无法获得滚动功能来显示/隐藏标题？