jquery窗口调整大小问题在响应式网页设计的断点

我正在做一个响应式网站。这里是提琴：jquery窗口调整大小问题在响应式网页设计的断点

我做了一些影响火当窗口宽度小于768px小，和其他一些影响火当winddow宽度宽于768px。除非手动调整浏览器窗口大小并传递768px断点，否则效果无法正常工作或布局中断，所有工作都很好。

例如，向下滚动时，会看到“+”按钮。我已经编码，所以当你的菜单出现hover'+'按钮在窗口宽度超过768px ...在窗口宽度小于768px，菜单应该只出现在你点击'+'按钮。

但是，当你在1200像素的浏览器窗口大小，例如浏览网页，并手动将其调整为600px的，+按钮仍然旋转的“悬停”和sidemenu上几个点击出现--thus单击事件不好好工作。只要刷新它，它就可以正常工作。所有其他与768px断点有关的效果都无法正常工作。

我已经googlged和搜索论坛，并尝试过他们，但没有运气。我也试图把如果（windowsize> 768）在$（窗口）.scroll（函数（）{这样的：？

function checkWidth() { 
    var windowsize = $window.width(); 

    $(window).scroll(function() { 
     if (windowsize > 768) { 
     var clicked = false; 

      if ($(window).scrollTop() >= 80 && clicked === false) { 
       $("#headerWrap").hide().css("position","fixed") 
       ...

，但它没有工作，要么需要什么做我一直在努力摸不着头脑的最后两天，现在完全耗尽。任何帮助将不胜感激！

来源

2014-10-04 Ernie

有大量的代码，并在悬停我的地方没有火灾。您能否将代码分解为单个问题和疑问？有一件事可以帮助你，是危险的'！important'css属性。这是一件你应该尽可能少用的东西。你知道css是从你的文件的顶部到底部级联，最后让我们说添加的颜色将是颜色。现在jQuery不是在css文件中编写的，它在html标签中使用了这些内联样式，它们总是比CSS样式更强。现在用'！important'可以覆盖内联样式。其他方法是从JS – caramba 2014-10-04 09:21:16

@ caramba中删除'.attr（'style'）'谢谢你的回复。你可以调整jsfiddle结果部分的宽度大于768像素（它应该切换到两个列布局），重新运行代码，并向下滚动？您会看到顶层菜单消失，并出现+按钮。当您悬停此按钮时，它应该旋转并重新显示顶层菜单。如果您发现悬停时发生任何效果，请告诉我。 – Ernie 2014-10-04 10:34:17

@caramba我也很快删除了我的代码......这可能仍然很粗糙，但您仍然可以看到悬停点击问题。如果您查看宽度超过768px的结果部分，则会看到+按钮在悬停时会旋转，并且当您调整窗口大小时，悬停事件仍然存在，并且单击事件功能不正常。（你必须点击几次让sidemenu进出滑动，这里是小提琴：http://jsfiddle.net/c6c99sbf/5/ – Ernie 2014-10-04 10:55:12

你有一个巨大的'如果别人的情况下，你应该模块化使用功能

你有没有“unbinded”你在'else'条件上绑定'if'条件的函数所以发生的事情是绑定在'if'条件下的函数在'window.resize'事件的'其他'条件下，更多的函数被绑定。

参见：http://api.jquery.com/unbind/的细节

所有最优秀的。

来源

2014-10-04 13:38:20

我认为你应该使用css和media queries建立有效的响应式设计

来源

2014-10-05 09:03:04

jquery窗口调整大小问题在响应式网页设计的断点

回答

相关问题