内联javascript代码不起作用

Question

Here I am using a scrollupformenu plugin to change the look and feel of scrollbar and some other js file . 在这里，我使用的是scrollupformenu插件来更改滚动条和其他js文件的外观。
In below code you can find my css and js files. 在下面的代码中，您可以找到我的css和js文件。

Because of scrollupformenu plugin I cant use a inline javascript code 由于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>

Inline javascript code as follow. 内联JavaScript代码如下。 And I want this below js code to work. 我希望下面的js代码能够正常工作。 Onscroll it should hide/show the specified division 滚动时，它应该隐藏/显示指定的分区

    <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>

Division that should hide/show 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>

Inline jQuery code for scrollupformenu plugin 用于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>

How to make that inline javascript code to work 如何使内联JavaScript代码正常工作

Answer 1

you got to use the 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>

once all divs are loaded so put just above the </html> 加载完所有div后，将其放在</html>上方

in the plugin we have this event capture you got this is overriding your inline script,try to write the scripts in this function 在插件中，我们捕获了此事件，这是覆盖内联脚本的原因，请尝试在此函数中编写脚本

$(window).bind('scroll',function () { } $（window）.bind（'scroll'，function（）{}

内联javascript代码不起作用

问题描述

1 个解决方案

解决方案1
0 2015-09-13 06:44:35

内联javascript代码不起作用

问题描述

1 个解决方案

解决方案1 0 2015-09-13 06:44:35

解决方案1
0 2015-09-13 06:44:35