admin管理员组

文章数量:1315364

I had working a java script in my html page.Now i moved the script to an external js file. here is the script(jful.js)

<script type="text/javascript">
$(function() {

    // grab the initial top offset of the navigation 
    var sticky_navigation_offset_top = $('#catnav').offset().top;

    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top

        // if we've scrolled more than the navigation, change its position to fixed to stick to top,
        // otherwise change it back to relative
        if (scroll_top > sticky_navigation_offset_top) { 
            $('#catnav').css({ 'position': 'fixed', 'top':0, 'left':0 });
        } else {
            $('#catnav').css({ 'position': 'relative' }); 
        }   
    };

    // run our function on load
    sticky_navigation();

    // and run it again every time you scroll
    $(window).scroll(function() {
         sticky_navigation();
    });

});
</script>

Now the script is not working. I included the script like this 

<head><script src=".6.4/jquery.min.js"></script>
<script type="text/javascript"  src="jful.js"></script></head>

When i again add the script directly to HTML document ,it works !(this script is execute when we scroll down the page ) What is the problem ??

I had working a java script in my html page.Now i moved the script to an external js file. here is the script(jful.js)

<script type="text/javascript">
$(function() {

    // grab the initial top offset of the navigation 
    var sticky_navigation_offset_top = $('#catnav').offset().top;

    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top

        // if we've scrolled more than the navigation, change its position to fixed to stick to top,
        // otherwise change it back to relative
        if (scroll_top > sticky_navigation_offset_top) { 
            $('#catnav').css({ 'position': 'fixed', 'top':0, 'left':0 });
        } else {
            $('#catnav').css({ 'position': 'relative' }); 
        }   
    };

    // run our function on load
    sticky_navigation();

    // and run it again every time you scroll
    $(window).scroll(function() {
         sticky_navigation();
    });

});
</script>

Now the script is not working. I included the script like this 

<head><script src="http://ajax.googleapis./ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript"  src="jful.js"></script></head>

When i again add the script directly to HTML document ,it works !(this script is execute when we scroll down the page ) What is the problem ??

  • javascript
  • jquery
  • html
  • css
Share Improve this question asked Jul 2, 2012 at 7:14 Alfred FrancisAlfred Francis 4511 gold badge7 silver badges20 bronze badges 2
  • 1 Please add the error message you get or get your question closed because people can only guess what's the problem and then they guess wrong and then you say not working and then they guess again and that's wrong again and so on. P.S. It's probably not working because the original wrong file is fetched from cache – Esailija Commented Jul 2, 2012 at 7:22
  • Sorry,I won't repeat it again. – Alfred Francis Commented Jul 2, 2012 at 7:27
Add a ment  | 

4 Answers 4

Reset to default 6

Remove these

<script type="text/javascript">

and 

</script>

You don't need <script type="text/javascript"> and </script> in jful.js.

if you have added <script type="text/javascript"> into your JS file remove the tags, you should just include plain JS code into the .js files.

I had a similar issue. (Just raw javascript). I solved the issue placing the script tag right after closing the html tag. I think it's because the DOM was not pletely loaded before executing the script.

Here's an example

<html>
  <body>
  </body>
</html>
<script src="script.js"></script>

That way, the browser will execute the script once the whole page elements have been loaded.

The browser may give a different result when the script is in an external file. Once the code stopped working for me when i moved it to an external file while the same code worked when i wrote it inside the html script tag.

本文标签： jqueryJavaScript not working when moved to an external js fileStack Overflow

版权声明：本文标题：jquery - JavaScript not working when moved to an external .js file - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741974318a2408028.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。