向下滚动并使用 Java 脚本修复标头
scroll down and fixed the header with java script
我希望当我向下滚动时标题会有背景,但在顶部标题将是透明的,就像这个链接一样,我可以使用引导程序将该标题固定在顶部,但我希望当我向下滚动时它会得到修复。
这是我的网站布局在此处输入链接说明
HTML 代码是' 切换导航 正中电
<!-- Cover Page Text Starts Here -->
<section class="first firstheading">
<Div class="psr">
<div class="container-fluid">
<h2 id="social">Gain International Experience</h2>
<p>We offer abroad internship programme for students and recent gradudates</p>
</div>
<ul>
<li>LONDON</li>
<li>DUBAI</li>
<li>INDIA</li>
<li>CHINA</li>
</ul>
</div>
</section>
<!-- End of Cover Page -->
<!-- Slider Starts Here -->
<section class="second-sc">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Indicators -->
<div class="container-fluid second-menu">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="second-menu-active">LONDON</li>
<li data-target="#carousel-example-generic" data-slide-to="1">DUBAI</li>
<li data-target="#carousel-example-generic" data-slide-to="2">MUMBAI</li>
<li data-target="#carousel-example-generic" data-slide-to="3">BANGALORE</li>
<li data-target="#carousel-example-generic" data-slide-to="4">BEIGING</li>
</ol>
</div>
<div class="container-fluid dots">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="dots-active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
</div>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme"><a href="">FIND OUT MORE</a></div>
</div>
</div>
</div>
<div class="item ">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme"><a href="">FIND OUT MORE</a></div>
</div>
</div>
</div>
<div class="item ">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme"><a href="">FIND OUT MORE</a></div>
</div>
</div>
</div>
<div class="item ">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme"><a href="">FIND OUT MORE</a></div>
</div>
</div>
</div>
<div class="item ">
<div class="second">
<div class="second-menu">
<h2>DUBAI INTERSHIP PROGRAMME</h2>
<p>Dubai is a great desitnation if you’re looking for corporate and real estate experience. We work with over 60 companies in Dubai</p>
<div class="second-dugme"><a href="">FIND OUT MORE</a></div>
</div>
</div>
</div>
</div>
</div>
</section>`
这是一个函数,你可以使用它,它很简单,用jquery编写
$(document).ready (function () {
$(window).scroll (function () {
var sT = $(this).scrollTop();
if (sT >= 300) {
$('.overlay').addClass('cambio')
}else {
$('.overlay').removeClass('cambio')
}
})
})
并尝试此链接 http://jsfiddle.net/rcAev/17/
相关文章:
- 借助asp.net验证或java脚本对多个文本进行验证
- Java脚本时间添加
- 如何将字符串值从php页面发送到java脚本页面
- java脚本在Chrome和其他浏览器中对LocaleTimeString的不同行为
- Java脚本将URL转换为已保存的URL时出错
- 如何使用Java脚本创建提交按钮's的拖放功能
- 如何在java脚本中验证手机号码
- 使用java脚本更改onClick事件中菜单选项卡的颜色
- 无限的java脚本循环
- 无法在java脚本中调用图像的点击事件函数
- 如何在java中获得浏览器的java脚本控制台输出
- 我的html表单无法验证.请参阅代码片段中的html代码和java脚本
- java脚本的数学方程显示错误的答案
- AngularJS:如何使用java脚本函数更改跨度的ng-show条件
- 如何在java脚本中传递对象数组
- java脚本网站最佳实践
- 无法将java脚本函数与Panel'绑定;s OnLoad事件
- java安全doPrivileged方法如何阻止任意脚本
- Java脚本访问Location标头's OAuth 2的URL片段
- 在 HTML 上运行两个脚本(Java 脚本)