来自 jsfiddle 的代码不起作用答案

【问题标题】：Code from jsfiddle doesn't work来自 jsfiddle 的代码不起作用
【发布时间】：2015-11-25 21:02:10
【问题描述】：

我需要一段代码在我的网站中使用（我几乎找不到），但是当我在我的 html 文件中使用它时，它不起作用。

我尝试将它放在 <html> 之前，在头部和身体中，都不起作用。
也试过$(document).ready(function() { ... });

我正在使用：

<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>

但也许我需要另一个

这里是 jsfiddle：http://jsfiddle.net/Tgm6Y/1447/。

var windw = this;

$.fn.followTo = function ( elem ) {
    var $this = this,
        $window = $(windw),
        $bumper = $(elem),
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() > (bumperPos - thisHeight)) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight)
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        };
    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

$('#one').followTo('#two');

【问题讨论】：

以上代码有什么问题，你的目标是什么？
猜猜这与你的 css 位置有关。

标签： javascript jquery html css ajax

【解决方案1】：

它在文档就绪功能中运行良好。您的 javascript 可能会出错，因为该 ajax 脚本是 404ing。我刚刚逐字测试了这段代码，它运行良好：

<html>
<head>
<style>
body, html{
    height:200%;
}


#one {
    width:100%;    
    height: 200px;
    background-color: aqua;
    position: fixed;
}


#two {
    width: 100%;    
    height:50px;
    background-color: red;
    margin-top:150%;
    position:absolute;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function() {
    var windw = this;

    $.fn.followTo = function ( elem ) {
        var $this = this,
            $window = $(windw),
            $bumper = $(elem),
            bumperPos = $bumper.offset().top,
            thisHeight = $this.outerHeight(),
            setPosition = function(){
                if ($window.scrollTop() > (bumperPos - thisHeight)) {
                    $this.css({
                        position: 'absolute',
                        top: (bumperPos - thisHeight)
                    });
                } else {
                    $this.css({
                        position: 'fixed',
                        top: 0
                    });
                }
            };
        $window.resize(function()
        {
            bumperPos = pos.offset().top;
            thisHeight = $this.outerHeight();
            setPosition();
        });
        $window.scroll(setPosition);
        setPosition();
    };

    $('#one').followTo('#two');
});
</script>
</head>
<body>
    <div id="one">FIXED...</div>
    <div id="two">...BUT STOPS HERE</div>
</body>
</html>

如果它仍然无法正常工作，请检查浏览器中的控制台，您可能只是在某个地方的 javascript 中出现随机语法错误。将此代码粘贴到文件中将演示 jsfiddle 所做的相同操作。

【讨论】：

已复制并且可以工作，但是当我在我的代码布局中添加准备好的文档时它不起作用。无论如何，非常感谢。
@DeneaNovac 在浏览器中检查你的控制台，可能只是某个地方的语法错误

【解决方案2】：

你想要相同的 jsfiddle 工作，那么它工作正常，如果你使用你在这里提供的任何代码你缺少的引号 @second js 文件路径，或者如果你想要比这个小提琴更多的东西，你可以在这里提到...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

以下代码运行良好

<!DOCTYPE html>
<html>
<head>
    <style>
       body, html{
        height:200%;
        }


        #one {
            width:100%;    
            height: 200px;
            background-color: aqua;
            position: fixed;
        }


        #two {
            width: 100%;    
            height:50px;
            background-color: red;
            margin-top:150%;
            position:absolute;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.js"></script>
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
</head>
<body>
    <div id="one">FIXED...</div>
    <div id="two">...BUT STOPS HERE</div>
    <script>
        var windw = this;

        $.fn.followTo = function ( elem ) {
            var $this = this,
                $window = $(windw),
                $bumper = $(elem),
                bumperPos = $bumper.offset().top,
                thisHeight = $this.outerHeight(),
                setPosition = function(){
                    if ($window.scrollTop() > (bumperPos - thisHeight)) {
                        $this.css({
                            position: 'absolute',
                            top: (bumperPos - thisHeight)
                        });
                    } else {
                        $this.css({
                            position: 'fixed',
                            top: 0
                        });
                    }
                };
            $window.resize(function()
            {
                bumperPos = pos.offset().top;
                thisHeight = $this.outerHeight();
                setPosition();
            });
            $window.scroll(setPosition);
            setPosition();
        };

        $('#one').followTo('#two');


    </script>
</body>

【讨论】：