jquery - 滚动锁定菜单略微关闭

标签 jquery css html

我正在使用 CSS 和 HTML5 设置水平菜单。 (我对两者的经验都有限。)这是我的菜单 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 代码动态应用它来完成此操作:

.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 中的代码)，并且在某些浏览器中向下滚动时它会稍微变宽。有什么方法可以将“固定”类宽度设置为在自动宽度上工作，而不是将其硬编码为特定像素宽度，以便它在所有浏览器中工作？

我试图将一个 jsfiddle 放在一起，但没有完全成功地设置它来说明我的观点，但是 here is a basic idea .

为清楚起见更新:

例如this fiddle硬编码宽度为 346px 在 Chrome 中非常适合我，但在 FF 和 IE 中略有偏差。

我真的很想将宽度设置为自动，但是当我尝试这样做时 it expands to take up the whole width of the screen ，可能是由于“显示: block ”。我对 CSS 了解不够，无法正确设置。

最佳答案

好吧，我会说你需要重新考虑你的问题，因为这需要你的元素被视为 table，所以你可以利用 display:table 和一些 js计算以居中元素:

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

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

在 fiddle 中，我们添加了更多菜单项并且效果很好。

检查带有更多菜单项的其他片段。 

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

Updated fiddle.

关于jquery - 滚动锁定菜单略微关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34849927/

上一篇：javascript - TinyMCE 4 不适用于可排序的 jquery div

下一篇：javascript - 在javascript中添加动态控件

相关文章：

javascript - 在 jquery 选择器中使用变量

css - 如何使用npm获取fontawesome pro css文件

html - 在页面加载时设置选项的背景颜色

jquery - 使用 twitter-bootstrap 在 btn-group 中定义值

javascript - 多次失去焦点时淡入淡出效果刷新

html - 倾斜的文本容器

javascript - 数据表 - td 附加属性

javascript - Jquery 可调整大小的销毁删除句柄元素

javascript - Jquery HTML CSS slider 问题

html - Bootstrap 容器类不适用于 Chrome

©2024 IT工具网  联系我们