我在这里使用 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>
应该隐藏/显示滚动的部分
<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 代码工作
最佳答案
你必须使用脚本
<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('滚动',function () {
关于javascript - 内联 JavaScript 代码不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32546986/