jQuery 粘性插件可变顶部间距

Question

我正在使用 jQuery sticky plugin 将菜单和联系信息粘贴到顶部。该站点是响应式的，因此菜单顶部的间距会发生变化。我正在尝试根据联系信息的 CSS 值设置不同的间距，但它不起作用。我很确定我的 jQuery 是正确的...

 $(document).ready(function(){   
 function checkForFloat()
  {
    setTimeout(checkForFloat, 100);
    if($("#contact").css("float") === "none") {
      $("#headerbg2").sticky({topSpacing:180});   
    }
    else if (!$("#contact").css("float") === "none") {
      $("#headerbg2").sticky({topSpacing:120});
    }
  }
});

http://jsfiddle.net/1j9cdsro/

Answer 1

试试这个：

$(document).ready(function(){   
 function checkForFloat()
  {
    setTimeout(checkForFloat, 100);
    if($("#contact").css("float") === "none") {
      $("#headerbg2").sticky({topSpacing:180});   
    }
    else if ($("#contact").css("float") !== "none") {
      $("#headerbg2").sticky({topSpacing:120});
    }
  }
});

更改了“！”位置。

Answer 2

要从文档中对粘性内容进行动态更改，需要先取消粘性并更新

$("#headerbg2").unstick() &  $("#headerbg2").sticky('update')

这还需要将 (!$("#contact").css("float") === "none") 更改为 ($("#contact").css("float") != "none") 或 else { .. }

演示动态 window 调整大小

http://jsfiddle.net/w2jv7szg/

代码

      $(document).ready(function () {
      $("#headerbg1").sticky({
          topSpacing: 0
      });

      function checkForFloat() {


          if ($("#contact").css("float") === "none") {
              $("#headerbg2").sticky({
                  topSpacing: 50
              });
          } else {
              $("#headerbg2").sticky({
                  topSpacing: 120
              });
          }
      }
      setTimeout(checkForFloat, 1000);


      window.addEventListener('resize', function (event) {
            $("#headerbg2").unstick()

          if ($("#contact").css("float") === "none") {
              $("#headerbg2").sticky({
                  topSpacing: 50
              });
              $("#headerbg2").sticky('update')
          } else {
              $("#headerbg2").sticky({
                  topSpacing: 120
              });
              $("#headerbg2").sticky('update')
          }
      })

  });

jQuery 粘性插件可变顶部间距

jQuery Sticky Plugin Variable Top Spacing

javascript

css

jquery

sticky

settimeout