如何控制页面上的#id链接
How to control #id link on a page?
这个小提琴将解释比我的话更多
如何避免隐藏标题当点击链接id 2, 链接id 3和链接id 4?
PS:如果有人有更好的名字,请帮助,我的英语不是那么好!
<header id="header">
header
</header>
<div class="catalog">
<div class="col1">
<ul>
<li><a href="#id1">Link id 1</a></li>
<li><a href="#id2">Link id 2</a></li>
<li><a href="#id3">Link id 3</a></li>
<li><a href="#id4">Link id 4</a></li>
<li><a href="#id5">Link id 5</a></li>
</ul>
</div>
<div class="col_alternativ"></div>
<div class="col2">
<div id="id1" class="item">
<h2>Link id 1</h2>
</div>
<div id="id2" class="item">
<h2>Link id 2</h2>
</div>
<div id="id3" class="item">
<h2>Link id 3</h2>
</div>
<div id="id4" class="item">
<h2>Link id 4</h2>
</div>
<div id="id5" class="item">
<h2>Link id 5</h2>
</div>
</div>
</div>
$(window).scroll(function() {
var newValue = {opacity : 100}
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$("#header").addClass("stablemenu").animate(newValue, 1000);
$(".col1").addClass("stable_col1").animate(newValue, 1000);
$(".col_alternativ").css({"display":"inline-block"});
} else {
$("#header").removeClass("stablemenu");
$(".col1").removeClass("stable_col1").animate(newValue, 1000);
$(".col_alternativ").css({"display":"none"});
}
});
我可以做你想做的…我认为。详见:http://jsfiddle.net/wilsonjonash/tdz3H/8/
编辑:这是代码
<header id="header">
header
</header>
<div class="catalog">
<div class="col1">
<ul>
<li><a href="#id1">Link id 1</a></li>
<li><a href="#id2">Link id 2</a></li>
<li><a href="#id3">Link id 3</a></li>
<li><a href="#id4">Link id 4</a></li>
<li><a href="#id5">Link id 5</a></li>
</ul>
</div>
<div class="col_alternativ"></div>
<div class="col2">
<div class="item">
<div id="id1" class="hederid"></div>
<h2>Link id 1</h2>
</div>
<div class="item">
<div id="id2" class="hederid"></div>
<h2>Link id 2</h2>
</div>
<div class="item">
<div id="id3" class="hederid"></div>
<h2 id="id3">Link id 3</h2>
</div>
<div class="item">
<div id="id4" class="hederid"></div>
<h2>Link id 4</h2>
</div>
<div class="item">
<div id="id5" class="hederid"></div>
<h2>Link id 5</h2>
</div>
</div>
</div>
CSS: #header {
width: 100%;
height: 100px;
background-color: red;
}
.stablemenu {
position: fixed;
top: 0px;
left:0px;
z-index: 2;
background-color: yellow !important;
}
.catalog {
display: block;
width: 100%;
margin-top: 40px;
}
.catalog .col1 {
display: inline-block;
border: 1px solid #ccc;
width: 25%;
height: auto;
padding: 1%;
margin-right: 1%;
}
.catalog .col_alternativ {
border: 1px solid #fff;
width: 25%;
height: auto;
padding: 1%;
margin-right: 1%;
display: none;
}
.stable_col1 {
position: fixed;
top: 140px;
left: 0px;
}
.catalog .col2 {
display: inline-block;
width: 70%;
height: auto;
vertical-align: top;
}
.item {
border: 1px solid #ccc;
width: auto;
height: 300px;
margin-bottom: 40px;
position: relative;
}
.item .hederid {
position: absolute;
background: #ccc;
width: 20px;
height: 20px;
left: 0px;
top: -140px;
}
JavaScript: $(window).scroll(function() {
var newValue = {opacity : 100}
var scroll = $(window).scrollTop();
if (scroll >= 100) {
$("#header").addClass("stablemenu").animate(newValue, 1000);
$(".col1").addClass("stable_col1").animate(newValue, 1000);
$(".col_alternativ").css({"display":"inline-block"});
$('.col2').css('margin-top','100px');
//$("#topbar").show().animate(newValue, 1000);
} else {
$("#header").removeClass("stablemenu");
$(".col1").removeClass("stable_col1").animate(newValue, 1000);
$(".col_alternativ").css({"display":"none"});
$('.col2').css('margin-top','0');
}
});
相关文章:
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- 如何进行AJAX调用,使其仅在我单击包含在特定类中的链接时触发;id”;父元素的
- 通过单击链接(兄弟姐妹?)从无线电输入中获取id
- 通过id查找元素并附加链接
- url中没有id的内部链接
- 如何绑定多个具有相同敲除功能、传递不同ID的链接
- 修复Javascript代码以将文本中的所有Youtube链接转换为Youtube ID功能
- 如何从链接中检索 ID
- 检测单击的链接的 ID 以更改链接的去向
- 获取单击的链接的 ID
- 在没有 jquery 的情况下更改子节点(父节点具有 ID)中的链接文本
- 使用animate将标签链接锚定到不同页面上的ID
- 如何设置从数据库到php会话的id点击链接
- VBA IE单击/显示没有id或标记而不是超链接的javascript
- Meteor发布中通过id链接用户
- 更改切换 ID 链接的颜色
- 铬错误或编码错误?目标页面中的锚/ID 链接不起作用
- 如何控制页面上的#id链接
- 想在其他html页面上只运行匹配id链接吗
- 使 id 链接可见 - 防止单击定位点时发生默认事件