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中有一个图标，当点击时，我想将标题返回到位置：'fixed'。我尝试过一个简单的.click函数，但这不起作用。

非常复杂的小提琴：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元素传递给函数（或者可能只是一个选择器）并绑定该对象，以便在单击它时将CSS重置为固定位置。

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

http://jsfiddle.net/SfV3N/

单击时更改div定位

1 个答案: