滚动锁定菜单略微关闭

时间：2016-01-18 08:13:58

标签： jquery css html5

我正在使用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的硬编码宽度为346像素，对我来说在Chrome中非常适合，但在FF和IE中稍微偏离。

我真的想将宽度设置为自动，但是当我尝试it expands to take up the whole width of the screen时，可能是由于“display：block”。我不知道足够的CSS能够正确设置它。

2 个答案:

答案 0 :(得分：1)

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

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

＆＃13;
＆＃13; 
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');
  }
});
＆＃13; 
.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;
}
＆＃13; 
<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
＆＃13;
＆＃13;
＆＃13;

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

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

＆＃13;
＆＃13; 
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');
  }
});
＆＃13; 
.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;
}
＆＃13; 
<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
＆＃13;
＆＃13;
＆＃13;

Updated fiddle.

答案 1 :(得分：0)

你需要删除宽度并删除右边：0;并离开：0;特性

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

结帐小提琴https://jsfiddle.net/kriscoulson/xt3yf0zb/10/

相关问题
最新问题