Question

当用户滚动超过300px时，请查看JSFiddle Example我在哪里使用脚本将绝对位置div更改为固定。我怎么能根据父div的大小改变300？

jQuery(function($) {
    function fixDiv() {
      var $cache = $('.getFixed'); 
      if ($(window).scrollTop() > 300 ) 
        $cache.css({'position': 'fixed', 'top': '0px'}); 
      else
        $cache.css({'position': 'absolute', 'top': '300px'});
    }
    $(window).scroll(fixDiv);
    fixDiv();
});

我认为可能需要窗口调整大小功能，但我不知道如何将值传递到滚动脚本以更改用户滚动的位置。

非常感谢任何帮助！

Answer 1

如果你想要$ cache元素的父元素，那么你可以使用$ cache.parent（）;

如果你想得到一个元素的高度或宽度，你可以使用$ el.width（），$ el.innerWidth（），$ el.height（），$ el.innerHeight（）

您可以使用它们来计算图像的高度和相关位置

jQuery(function($) {
    function fixDiv() {
      var $cache = $('.getFixed');
      var offsetTop = $('#image').height() + $('#image').offset().top;
      if ($(window).scrollTop() > offsetTop ) 
        $cache.css({'position': 'fixed', 'top': '0px'}); 
      else
        $cache.css({'position': 'absolute', 'top':  offsetTop + 'px'});
    }
    $(window).scroll(fixDiv);
    fixDiv();
});

Answer 2

回答你问题的两个部分：

jQuery(function($) {
    function fixDiv() {
      var $cache = $('.getFixed'); 
      var theHeight = $cache.parent().height();

      if ($(window).scrollTop() >  theHeight) 
        $cache.css({'position': 'fixed', 'top': '0px'}); 
      else
        $cache.css({'position': 'absolute', 'top': theHeight+'px'});
    }
    $(window).scroll(fixDiv);
    fixDiv();

    $( window ).resize(function() {
        var width = $(this).width();
        var parentWidth = $(this).offsetParent().width();
        var percent = 100*width/parentWidth;
        $("#image").width(percent+"%");
    });
});

我使用resize()函数更改了div的宽度。

根据窗口大小更改Jquery值

2 个答案: