Question

我正在寻找解决方案，以解决我的有关固定div的问题，当滚动到同一div时。我可以这样创建脚本：

$(window).scroll(function() {
  if ($(document).scrollTop() > 10) {
      $('.divv').addClass('fixed-top');

  } else {
      $('.divv').removeClass('fixed-top');
  }
});

但是脚本仅适用于精确的px，我想在击中该div时使div固定，因为它上面的内容是动态的并更改尺寸。

我的新工作脚本：

    var elementMap = $('.map-box').offset();
    var elementHeight = $('.calc-height').offset();
    var elementdiffBott = elementHeight.top - $('.map-box').height();

$(window).scroll(function(){
    //alert(elementdiffBott);
        if($(window).scrollTop() > elementMap.top){
            var mapWidth = $('.map-box').width();
              $('.map-box').addClass('gmap-fixed').css('width',mapWidth);
        } else {
            $('.map-box').removeClass('gmap-fixed');
        }    if($(window).scrollTop() > elementdiffBott){
            $('.map-box').removeClass('gmap-fixed');
        }
});

Answer 1

您可以尝试以下示例：在此示例中，当div出现在屏幕上时，它将向div中添加固定顶部的类

$(window).scroll(function(){
  $('.divv').each(function(){
    if(isScrolledIntoView($(this))){
      $('.divv').addClass('fixed-top');
    }
    else{
      $('.divv').removeClass('fixed-top');
    }
  });
});

function isScrolledIntoView(elem){
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

滚动时-仅在按div时使元素固定

1 个答案: