下拉菜单 - 固定属性
Dropdown Menu - Fixed Properties
我有一个菜单在屏幕的一半。它包含一些下拉菜单列表,当用户滚动到某个点时,它会粘在页面顶部。
<div class="discover_filter ">
<div class="filter1">
<p class="menuitem">Type</p>
<ul>
<li>Option</li>
</ul>
</div>
<div class="filter1">
<p class="menuitem">Location</p>
<ul>
<li>Option</li>
</ul>
</div>
<div class="filter1">
<p class="menuitem">Industry</p>
<ul>
<li>Option</li>
</ul>
</div>
<div class="filter1">
<p class="menuitem">Featured</p>
<ul>
<li>Option</li>
</ul>
</div>
</div>
CSS:
.discover_filter {
width: 980px%;
height: 50px;
background-color: #ea8f18;
padding: 0 40px;
}
.stick {
position: fixed;
top: 103px;
z-index: 9999;
width:980px;
}
.filter1 {
float: left;
z-index:9999;
cursor: pointer;
height:50px;
background-color:#ea8f18;
width: 170px;
color: white;
overflow: hidden;
.menuitem {
font-weight: bold;
display:block;
height:20px; width: 150px;
padding: 15px 10px;
font-size: 15pt;
}
还有Javascript:
$('.filter1').hover(function() {
$(this).animate({ 'height': '400px' }, 250);
}, function() {
$(this).animate({ 'height': '50px' }, 250);
});
var s = $(".discover_filter");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= 400) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
问题是,菜单向下推其下方的页面,除非菜单已正确固定到页面顶部(一旦用户滚动到足够远)。
如何在不向下推页面的情况下正确覆盖菜单?
我抓住你了。我可以给你一些不同的东西。我在某个地方做到了。
.js
$(document).on("scroll", function () {
if ($(document).scrollTop() > "700") {
$(".nav_class").css({ "position": "relative" });
}
else {
$(".nav_class").css({ "position": "fixed"});
}
});
700 = 是您想要将其固定在屏幕顶部时可以更改的值。
或创建两个类
.CSS
.class_a
{
position:relative;
}
.class_b
{
position:fixed;
top:0; /*to fix it on top*/
}
.JS
$(document).on("scroll", function () {
if ($(document).scrollTop() > "700") {
$(".nav_class").removeClass('class_a');
}
else {
$(".nav_class").addClass('class_b');
}
});
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- angular的下拉菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- 下拉菜单 - 固定属性
- 我一直收到未捕获的引用错误:未定义下拉菜单和未捕获的类型错误:无法读取 null 的属性“样式”
- 如何使用路由器和内置/自定义属性在aurelia中创建下拉菜单
- 下拉菜单上的多个属性选择器
- 在angular js的select下拉菜单中访问枚举属性
- 从下拉菜单中添加值到html属性
- 如何使用相同的.dropit css文件创建具有不同属性的两个下拉菜单?
- 如何从下拉菜单中更改href属性
- 如何使用下拉菜单和HTML5数据属性动态更改HTML元素的分组
- 如何在jQuery上更改下拉菜单属性
- 如何从下拉菜单中选择的选项获得标题属性的值
- 我如何切换'禁用'属性到我的下拉菜单的基础上,我有我的数组
- 如何根据我的下拉菜单打印出我的对象属性
- 如何将下拉菜单的值传递给instafeed tagName属性
- 由于溢出属性,CSS下拉菜单没有显示