这里我使用scrollupformenu插件来更改滚动条和其他一些js文件的外观。
在下面的代码中，您可以找到我的css和js文件。
由于scrollupformenu插件我不能使用内联JavaScript代码
<!DOCTYPE html>
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- stylesheet for demo and examples -->
<link rel="stylesheet" href="assets/scrollbar/examples/style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/jquery.vegas.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="assets/icon-fonts/styles.css">
<link rel="stylesheet" href="css/pixeden-icons.css">
<!-- CUSTOM STYLES -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- WEBFONT -->
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,400italic|Montserrat:700,400|Homemade+Apple' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- custom scrollbar stylesheet -->
<link rel="stylesheet" href="assets/scrollbar/jquery.mCustomScrollbar.css">
<!-- demo CSS -->
<style>
html, body{ height: 100%; }
</style>
内联javascript代码如下。我想在js代码下面这个工作。在其中应该隐藏/显示指定的分区
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
$("#dvid").show(); //reached the desired point -- show div
$("#othdiv").hide();
}
else
if($(window).scrollTop() < topOfOthDiv) { //scrolled past the other div?
$("#dvid").hide(); //reached the desired point -- show
$("#othdiv").show();
}
});
});
</script>
</head>
应该隐藏/显示onscroll的部门
<div id="othdiv">
<section class="container" id="on-top">
<div class="row" >
<div class=" col-lg-3 col-sm-6 col-xs-6">
<div class="input-group pull-left">
<span class="input-group-addon addon-location" id="basic-addon1">
<i class="fa fa-map-marker"></i>
</span>
<input type="text" class="form-control serach-input" placeholder="Serach Location" aria-describedby="basic-addon1">
</div>
</div><!-- /.col-lg-6 -->
<div class="pull-right col-lg-7 col-sm-6 col-xs-6">
<button class="btn btn-default dropdown-toggle pull-right addon-location" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-user"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</section>
</div>
<header>
<a href="/dashboard/MyApp" class="logo">
<img src="images/logo.png" alt="jQuery custom scrollbar" /></a>
<hr />
</header>
<div id="dvid">
<section class="container" >
<div class="row" >
<div class=" col-lg-3 col-sm-6 col-xs-6">
<div class="input-group pull-left">
<span class="input-group-addon addon-location" id="basic-addon1">
<i class="fa fa-map-marker"></i>
</span>
<input type="text" class="form-control serach-input" placeholder="Serach new" aria-describedby="basic-addon1">
</div>
</div><!-- /.col-lg-6 -->
<div class="pull-right col-lg-7 col-sm-6 col-xs-6">
<button class="btn btn-default dropdown-toggle pull-right addon-location" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-user"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</section>
</div>
用于scrollupformenu插件的内联jQuery代码
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.scrollupformenu.js"></script>
<!-- custom scrollbar plugin -->
<script src="assets/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content-1").mCustomScrollbar({
autoHideScrollbar:true,
theme:"rounded"
});
});
})(jQuery);
</script>
<script>
(function($){
$(window).load(function(){
$("body").mCustomScrollbar({
theme:"minimal"
});
});
})(jQuery);
</script>
</html>
如何使内联javascript代码正常工作
答案 0 :(得分：0)
你必须使用脚本
<script type="text/javascript">
$(document).ready(function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
$("#dvid").show(); //reached the desired point -- show div
$("#othdiv").hide();
}
else
if($(window).scrollTop() < topOfOthDiv) { //scrolled past the other div?
$("#dvid").hide(); //reached the desired point -- show
$("#othdiv").show();
}
});
});
</script>
加载所有div后，将其放在</html>
在插件中我们有这个事件捕获你得到这是覆盖你的内联脚本，尝试在这个函数中编写脚本
$（window）.bind（'scroll'，function（）{ }