如何在较小的屏幕上根据高度滚动粘性菜单

Question

我制作了一个menu，它在滚动时变得粘滞。 问题是，在屏幕上有一个很小的高度（例如移动），菜单无法完全看到，因为它在某种程度上比在下面的图片中看到的高度长得多。

但是更长的手机屏幕上可以充分地看到菜单

这是用来制作菜单，使其粘在滚动

的CSS

代码

/* Remove margins and padding from the list, and add a black background color */ 
ul.topnav { 
    list-style-type: none; 
    margin:0 auto; /* pour centrer le menu */ 
    padding: 0; 
    overflow:hidden; 

    background-color: #FFF; 
    text-align: center; 
    width:1400px; /* pour centrer le menu */ 
    max-width:100%; 
    max-width:100%; 
} 

/* Float the list items side by side */ 
ul.topnav li {float: left; } 

/* Style the links inside the list items */ 
ul.topnav li a { 
    display: inline-block; 
    color: #0071a6; 
    text-align: center; 

    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 20px; 
    transition: all .2s ease-in-out; 
    width:185px; /* Pour centrer le menu */ 
} 

/* Change background color of links on hover */ 
ul.topnav li a:hover { 
    background-color: #0071a6; 
    color:#FFF; 
    transform: scale(1.1); 
    } 

/* Hide the list item that contains the link that should open and close the topnav on small screens */ 
ul.topnav li.icon {display: none;} 


/* 
############################################################################## 
Add media query 
*/ 


@media screen and (max-width:768px) { 
    ul.topnav li:not(:first-child) {display: none;} 
    ul.topnav li.icon { 
    float: right; 
    display: inline-block; 
    } 

    ul.topnav li a { 
     width:auto; 
    } 

    ul.topnav { 
     width:auto; 
    } 
} 

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens 

Normalement @media screen and (max-width:768px) 

*/ 
@media screen and (max-width:768px) { 
    ul.topnav.responsive {position: relative;} 
    ul.topnav.responsive li.icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
    } 
    ul.topnav.responsive li { 
    float: none; 
    display: inline; 
    } 
    ul.topnav.responsive li a { 
    display: block; 
    text-align: left; 
    } 

    ul.topnav li a { 
     width:auto; 
    } 


    ul.topnav { 
     width:auto; 
    } 

} 


/* 

Pour le menu sticky 
*/ 


.menu { 

} 

.menu-padding { 

    padding-top:0px; 
} 

.sticky { 
    position:fixed; 
    top:0; 
    z-index:1; 
    overflow:hidden; 


} 

.sticky ul.topnav { 
    background-color:#0071a6; 
    border-bottom: 1px solid #666; 

    /* 
    border: 1px solid #FFFFFF; 
    */ 

} 

.sticky ul.topnav li a { 
    color:#FFF; 
} 

Javascript和jquery

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ 
function myFunction() { 
    document.getElementsByClassName("topnav")[0].classList.toggle("responsive"); 
} 

/* 
Jquery to make the menu sticky on scroll 
*/ 

$(document).ready(function() { 

    var menu = $('.menu'); 
    var origOffsetY = menu.offset().top; 

    function scroll() { 
     if ($(window).scrollTop() >= origOffsetY) { 
      $('.menu').addClass('sticky'); 
      $('.content').addClass('menu-padding'); 
     } else { 
      $('.menu').removeClass('sticky'); 
      $('.content').removeClass('menu-padding'); 
     } 


    } 

    document.onscroll = scroll; 

}); 

的Html

<div class="menu"> 

    <ul class="topnav"> 
    <li><a href="#home">HOME</a></li> 
    <li><a href="#news">WHO WE ARE </a></li> 
    <li><a href="#contact">WHAT WE DO</a></li> 
    <li><a href="#about">BLOGS</a></li> 
    <li><a href="#about">GET INVOLVED</a></li> 
    <li><a href="#about">JOBS</a></li> 
    <li><a href="#about">CONTACT US</a></li> 
    <li class="icon"> 
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
    </li> 
</ul> 

    </div> 

问题： 如何使屏幕上的菜单粘滚动的小高度然而，当达到正常位置，将不再是粘，能解决吗？

Answer 1

听起来好像你希望菜单本身在小屏幕上显示时可以滚动。

试试这个：

.menu { 
    max-height:100vh; 
    overflow-y:auto; 
} 

它不会做任何事情，除非菜单将大于屏幕。或者，使用媒体查询来重新设计菜单的移动版本，该菜单不会在第一时间中断（减少链接上的填充可能会对此情况起作用）。