内联javascript代码不工作
内联javascript代码不工作
提问于 2015-09-13 14:35:01
在这里，我使用了一个scrollupformenu插件来改变scrollbar和其他一些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>用于滚动菜单插件的内联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代码工作
回答 1
Stack Overflow用户
发布于 2015-09-13 14:44:36
你必须使用这个脚本
<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 () {}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32546986
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号