Question

我无法解决jquery问题，

我的代码在小提琴中起作用，但是当我将它添加到我的文档中时，它将不起作用。

请参阅链接

任何帮助都会很棒!!!!

http://paulobriendesign.co.uk/chartego/test.html（不工作） http://jsfiddle.net/7Gacp/（工作）

我的HTML

<html>
<head>
    <title>Page Title</title>

</head>

<style>
#profile-container {
    padding-top:52px;
    /* Red bar height */
    margin:0;
    /* Clear default browser margin */
}
#profile-container.fixed {
    padding-top:82px;
    /* Red bar height + yellow bar height */
}
#profile-container {
    height:2000px;
}
#fixed-header {
    width:100%;
    position:fixed;
    height:50px;
    border:1px solid black;
    top:0px;
    background-color:red;
}
.container {
    height:300px;
    width:100%;
    background-color:blue;
}
.sticky-header {
    width:700px;
    height:50px;
    background:orange;
}
.sticky-header {
    height:30px;
    width:100%;
    background:yellow;
}
.fixed .sticky-header {
    position: fixed;
    top:52px;
    margin-bottom:52px;
}
.img {
    width:200px;
    height:200px;
    border:1px solid grey;
    float:left;
}
</style>


<script>
var offset = $(".sticky-header").offset();
var sticky = document.getElementById("sticky-header")
var additionalPixels = 50;

$(window).scroll(function () {
    if ($(window).scrollTop() > offset.top - additionalPixels) {
        $('#profile-container').addClass('fixed');
    } else {
        $('#profile-container').removeClass('fixed');
    }
});
</script>


<body>

<div id="profile-container">
    <div id="fixed-header"></div>
    <div class="container"></div>
    <div class="sticky-header">This needs to be fixed when hits top of screen</div>
    <div class="img">needs to be smooth</div>
    <div class="img"></div>
    <div class="img"></div>
</div>


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</body>
</html>

Answer 1

您的脚本标记显示在jquery脚本上方。所以它还不知道$到底是什么。将您的脚本放在jquery下面并查看它是否有效（将脚本包装在document.ready中或者放在html中的元素之后，以便元素可供选择。）。在jsFiddle中，当您在下拉列表中选择load时，它会将您的脚本包装在window.onload中，在头部添加jquery的脚本标记，这就是它工作的原因。

<script>
var offset = $(".sticky-header").offset();
var sticky = document.getElementById("sticky-header")
var additionalPixels = 50;

$(window).scroll(function () {
    if ($(window).scrollTop() > offset.top - additionalPixels) {
        $('#profile-container').addClass('fixed');
    } else {
        $('#profile-container').removeClass('fixed');
    }
});
</script>


<body>

<div id="profile-container">
    <div id="fixed-header"></div>
    <div class="container"></div>
    <div class="sticky-header">This needs to be fixed when hits top of screen</div>
    <div class="img">needs to be smooth</div>
    <div class="img"></div>
    <div class="img"></div>
</div>


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

尝试

    <body>

    <div id="profile-container">
        <div id="fixed-header"></div>
        <div class="container"></div>
        <div class="sticky-header">This needs to be fixed when hits top of screen</div>
        <div class="img">needs to be smooth</div>
        <div class="img"></div>
        <div class="img"></div>
    </div>


    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 <script>
 $(function(){ //<--- Here document.ready
    var offset = $(".sticky-header").offset();
    var sticky = document.getElementById("sticky-header")
    var additionalPixels = 50;

    $(window).scroll(function () {
        if ($(window).scrollTop() > offset.top - additionalPixels) {
            $('#profile-container').addClass('fixed');
        } else {
            $('#profile-container').removeClass('fixed');
        }
    });
  });
 </script>

固定导航上的Jquery Bug？

1 个答案: