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

要对文档进行动态更改，需要首先解压缩并更新

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

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

动态窗口调整大小

演示

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')
          }
      })

  });

Answer 2

请改为尝试：

$(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});
    }
  }
});

更改了“！”位置。

jQuery Sticky插件变量顶部间距

2 个答案: