javascript - 单击更改 div 定位

Question

我正在松散地使用覆盖。我有一个粘性标题，它会在某个滚动点后更改为 position:absolute。

var windw = this; $.fn.followTo = function ( pos ) {
var $this = this,
    $window = $(windw);

$window.scroll(function(e){
    if ($window.scrollTop() > pos) {
        $this.css({
            position: 'absolute',
            top: pos
        });
    } else {
        $this.css({
            position: 'fixed',
            top: 0
        });
    }
});};$('#header').followTo(352);

我在滚动点后显示的标题下有一个 div。我在那个 div 中有一个图标，当单击时，我想将标题返回到位置:“固定”。我尝试了一个简单的 .click 函数，但它不起作用。

极其复杂的 fiddle :http://jsfiddle.net/hadronian/9bUqr/

Answer 1

我想这就是您要找的。我敢肯定，您可能会考虑对 UI 进行一些改进，但如果您希望在单击另一个元素后显示标题，这就是我想出的方法。

var windw = this;

$.fn.followTo = function ( pos, resetElement ) {
    var $this = this,
        $window = $(windw);
    var fixedCss = {
         position: 'fixed',
         top: 0
    };
    var absoluteCss = {
         position: 'absolute',
         top: pos
    };

    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css(absoluteCss);
        } else {
            $this.css(fixedCss);
        }
    });
    resetElement.click(function()
    {
        $this.css(fixedCss);
    });

};

$('#header').followTo(352, $('#down'));

基本上，将第二个 jQuery 元素传递给函数(或者可能只是一个选择器)并绑定(bind)到该对象，以便在单击它时将 CSS 重置到固定位置。

就像我说的，您可能还想做更多的改进，让用户体验更好一些，但希望这能让您走上正轨。

http://jsfiddle.net/SfV3N/