滚动锁定菜单稍微关闭 [英] Locking menu on scroll slightly off

问题描述

我正在使用CSS和HTML5设置水平菜单。 （我对两者的体验都是有限的。）这是我的菜单css：

I'm setting up a horizontal menu using CSS and HTML5. (My experience with both is limited.) This is my menu css:

.horizontalMenu { 
    background-color:  white;
    display: inline-block;
}

.horizontalMenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    text-align: left;
    box-shadow: 0 6px 10px -1px #888888;
    behavior: url(/css/pie/PIE.htc);
}

.horizontalMenu ul li {
    display: inline-block;
    background-color: white; 
    white-space: nowrap;
}

.horizontalMenu a {
    display: block;
    padding: 0 15px 0 15px; 
    color: black;
    font-size: 16px;
    line-height: 45px;
    text-decoration: none;
    cursor: pointer;
}

.horizontalMenu a:hover{ 
    background-color: #B0B0B0;
}

.horizontalMenu a.active{
    background-color: #6789AE;
}

/* Hide Dropdowns by Default */
.horizontalMenu ul ul {
    display: none;
    position: absolute; 
    top: 45px;
    z-index: 1;
}

/* Display Dropdowns on Hover */
.horizontalMenu ul li:hover > ul {
    display: block;
}

/* First Tier Dropdown */
.horizontalMenu ul ul li {
    float: none;
    display: list-item;
    position: relative;
}

/* Sub-menu options should be compact */
.horizontalMenu ul ul a{
    font-size: 14px;
    line-height: 30px;
}

/* Second, Third and more Tiers */
.horizontalMenu ul ul ul{
    position: absolute;
    left: 100%;
    top: 0;
}

我需要添加锁定功能，以便在用户向下滚动时在菜单过去的地方，菜单被锁定在屏幕顶部并随之出现。我通过添加固定类并使用JS代码动态应用它来完成此任务：

I needed to add a "locking" functionality so that if the user scrolls down past where the menu is, the menu gets locked to the top of the screen and comes along with them. I accomplished this by adding a "fixed" class and applying it dynamically using JS code:

.horizontalMenu.fixed {
    position:fixed;
    top:0;
    display:block;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    width:710px;
}

JS代码：

$(function(){
    var numScroll = 240; //number of pixels before modifying styles

    $(window).bind('scroll', function () {
        if ($(window).scrollTop() > numScroll) {
            $('.horizontalMenu').addClass('fixed');
        } else {
            $('.horizontalMenu').removeClass('fixed');
        }
    });
});

除了我硬编码到710px的宽度在不同的浏览器中略有不同外，这种方法效果相对较好，所以我似乎无法找到适合所有浏览器的宽度。页面顶部常规状态的菜单使用自动宽度（通过我没有设置并且不完全理解的包含div中的代码）居中，并且当向下滚动时，在某些浏览器中它会稍微宽一些。是否有任何方法可以将固定类宽度设置为自动宽度，而不是将其硬编码为特定像素宽度，以便它可以在所有浏览器中使用？

This works relatively well, except that the width that I hardcoded to 710px seems to differ slightly in different browsers, so I can't seem to find a width that works perfectly for all browsers. The menu in its regular state at the top of the page is centered using an auto width (through code in the containing divs that I did not set up and do not fully understand), and when scrolling down it gets slightly wider in some browsers. Is there any way to set the "fixed" class width to work on an auto width rather than hardcoding it to a specific pixel width so that it will work in all browsers?

我试图把一个jsfiddle放在一起，但是在设置它以说明我的观点时没有完全成功，但这里是一个基本理念。

I tried to put together a jsfiddle but was not completely successful in setting it up to illustrate my point, but here is a basic idea.

为清晰起见而更新：

例如这个小提琴的硬编码宽度为346px，对我来说非常适合Chrome浏览器，但在FF和IE中略有下降。

For example this fiddle with a hardcoded width of 346px works perfectly for me in Chrome but is slightly off in FF and IE.

我真的想把宽度设置为自动，但当我尝试它会扩展以占据屏幕的整个宽度，可能是由于display：block。我不知道足够的CSS能够正确设置它。

I really want to set the width to auto, but when I try that it expands to take up the whole width of the screen, likely due to the "display:block". I don't know enough CSS to be able to set this up right.

推荐答案

我会说你需要重新考虑你的问题，因为这需要将您的元素视为表，因此您可以使用 display：table 和一些js以元素为中心的计算：

Well i would say you need to rethink your problem because that requires your element to be treated as table, so you can make use of display:table and some js calculation to center your element:

以下代码段是具有相同菜单项的原始代码段。

The below snippet is the original one which have same menu items.

var numScroll = 20;
$(window).bind('scroll', function() {
  if ($(window).scrollTop() > numScroll) {
    $('.horizontalMenu').addClass('fixed').css('left', function(){
      return ($(window).width()-$(this).width())/2
    });
  } else {
    $('.horizontalMenu').removeClass('fixed').removeAttr('style');
  }
});

.horizontalMenu {
  background-color: white;
  display: table;
  margin: 0 auto;
}

.horizontalMenu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  text-align: left;
  box-shadow: 0 6px 10px -1px #888888;
  behavior: url(/css/pie/PIE.htc);
}

.horizontalMenu ul li {
  display: table-cell;
  background-color: white;
  white-space: nowrap;
}

.horizontalMenu a {
  display: table-cell;
  padding: 0 15px 0 15px;
  color: black;
  font-size: 16px;
  line-height: 45px;
  text-decoration: none;
  cursor: pointer;
}

.horizontalMenu a:hover {
  background-color: #B0B0B0;
}

.horizontalMenu a.active {
  background-color: #6789AE;
}


/* Hide Dropdowns by Default */

.horizontalMenu ul ul {
  display: none;
  position: absolute;
  top: 45px;
  z-index: 1;
}


/* Display Dropdowns on Hover */

.horizontalMenu ul li:hover > ul {
  display: table;
}


/* First Tier Dropdown */

.horizontalMenu ul ul li {
  float: none;
  display: list-item;
  position: relative;
}


/* Sub-menu options should be compact */

.horizontalMenu ul ul a {
  font-size: 14px;
  line-height: 30px;
}


/* Second, Third and more Tiers	*/

.horizontalMenu ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}


/* If any menu options are added, the width needs to be adjusted */

.horizontalMenu.fixed {
  position: fixed;
  top: 0;
  display: table;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='horizontalMenu'>
    <ul>
      <li><a>Website Config &#9662;</a>
        <ul>
          <li><a>Include Files</a></li>
        </ul>
      </li>
      <li><a>User Training &#9662;</a>
        <ul>
          <li><a>Upload new webinar &#9656;</a>
            <ul>
              <li><a>Training webinar</a></li>
              <li><a>Some other webinar</a></li>
            </ul>
          </li>
          <li><a>Upload new guide</a></li>
        </ul>
      </li>
      <li><a>Data</a></li>
    </ul>
  </div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />END

在小提琴中我们添加了更多菜单项效果很好。

In the fiddle we have more menu items added and works great.

查看包含更多菜单项的其他代码段。

check the other snippet with more menu items.

var numScroll = 20;
$(window).bind('scroll', function() {
  if ($(window).scrollTop() > numScroll) {
    $('.horizontalMenu').addClass('fixed').css('left', function(){
      return ($(window).width()-$(this).width())/2
    });
  } else {
    $('.horizontalMenu').removeClass('fixed').removeAttr('style');
  }
});

.horizontalMenu {
  background-color: white;
  display: table;
  margin: 0 auto;
}

.horizontalMenu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  text-align: left;
  box-shadow: 0 6px 10px -1px #888888;
  behavior: url(/css/pie/PIE.htc);
}

.horizontalMenu ul li {
  display: table-cell;
  background-color: white;
  white-space: nowrap;
}

.horizontalMenu a {
  display: table-cell;
  padding: 0 15px 0 15px;
  color: black;
  font-size: 16px;
  line-height: 45px;
  text-decoration: none;
  cursor: pointer;
}

.horizontalMenu a:hover {
  background-color: #B0B0B0;
}

.horizontalMenu a.active {
  background-color: #6789AE;
}


/* Hide Dropdowns by Default */

.horizontalMenu ul ul {
  display: none;
  position: absolute;
  top: 45px;
  z-index: 1;
}


/* Display Dropdowns on Hover */

.horizontalMenu ul li:hover > ul {
  display: table;
}


/* First Tier Dropdown */

.horizontalMenu ul ul li {
  float: none;
  display: list-item;
  position: relative;
}


/* Sub-menu options should be compact */

.horizontalMenu ul ul a {
  font-size: 14px;
  line-height: 30px;
}


/* Second, Third and more Tiers	*/

.horizontalMenu ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}


/* If any menu options are added, the width needs to be adjusted */

.horizontalMenu.fixed {
  position: fixed;
  top: 0;
  display: table;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class='horizontalMenu'>
    <ul>
      <li><a>Website Config &#9662;</a>
        <ul>
          <li><a>Include Files</a></li>
        </ul>
      </li>
      <li><a>User Training &#9662;</a>
        <ul>
          <li><a>Upload new webinar &#9656;</a>
            <ul>
              <li><a>Training webinar</a></li>
              <li><a>Some other webinar</a></li>
            </ul>
          </li>
          <li><a>Upload new guide</a></li>
        </ul>
      </li>
      <li><a>Data</a></li>
      <li><a>Data2</a></li>
      <li><a>Data3</a></li>
    </ul>
  </div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />END

这篇关于滚动锁定菜单稍微关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！