jQuery粘性插件可变顶部间距

jQuery Sticky Plugin Variable Top Spacing

本文关键字：顶部 插件 jQuery      更新时间：2023-09-26

我使用jQuery粘性插件将菜单和联系人信息粘贴到顶部。网站是响应性的，所以从顶部到菜单的间距会改变。我试图根据联系人信息的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/

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

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

试试这个：

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

更改了"！"位置。

相关文章：