Javascript 滚动页面会导致按钮出现问题_Javascript_Html_Button_Scroll

Javascript 滚动页面会导致按钮出现问题

javascript html button scroll

Javascript 滚动页面会导致按钮出现问题,javascript,html,button,scroll,Javascript,Html,Button,Scroll,我刚完成一个网站，一切都很好（我的想法）直到我发现一个无法修复的巨大错误：我有一个导航栏（png文件）并在上面添加了按钮（简单的DIVs元素），当页面第一次打开时，一切正常，但是如果你稍微滚动页面，按钮就不能正常工作请检查此链接：（向下滚动页面，您会注意到按钮不再交互）但如果将光标移到按钮上方一点，您会发现：（HTML-JavaScript）这里是CSS部分： #btn {position:absolute;left:0px;top:0px;z-index:4;} #btn1 {p

我刚完成一个网站，一切都很好（我的想法）直到我发现一个无法修复的巨大错误：

我有一个导航栏（png文件）并在上面添加了按钮（简单的DIVs元素），当页面第一次打开时，一切正常，但是如果你稍微滚动页面，按钮就不能正常工作

请检查此链接：（向下滚动页面，您会注意到按钮不再交互）

但如果将光标移到按钮上方一点，您会发现：

（HTML-JavaScript）

这里是CSS部分：

#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}

#html, body {
    background:#002a4c;
    overflow:scroll;
    width:1024px;
    height:768px;
    margin: 20px auto; /* center */ padding: 20px;

}

这里是HTML部分：

    <body >
    <div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>

       <div id='applet_t'>

            <div id='btn'>
                <div id='btn1'></div>
                <div id='btn2'></div>
                <div id='btn3'></div>
                <div id='btn4'></div>
                <div id='btn5'></div>
                <div id='btn6'></div>
            </div>

    </div>
        <div id='inf'></div>


    </div>

</body>

您的问题在于IMO非常不正确地使用

绝对

元素定位。当您滚动页面时，实际“点击”占位符的位置会随页面移动，但不会随背景移动

测试用例：尝试将页面向上移动一点，您将能够在实际按钮上方“单击”

除非您有充分理由绝对定位元素，否则请使用

静态==大多数元素的默认定位。
请提供更好的解释或jsFiddle来使用您的浏览器是什么？使用不同浏览器时会出现相同的问题？你的决心是什么？crome和全高清看起来不坏。获取firebug并进行一些尝试和错误。是的，所有浏览器-IE-Chrome-Safari-Firefox-都存在同样的问题-我应该粘贴整个代码吗？（长脚本）这个问题不是因为按钮的位置，因为我改变了按钮的颜色和不透明度，而且在滚动后它们总是在同一个位置，即使是光标行为也能很好地交互。。。但问题只存在于与错误位置交互的按钮功能（在“mouseenter”-“mouseleave”-“mousedown”）上。。。我正在使用jQuery1.8.2。有什么帮助吗？在javascript中是否仍要使用而不是.on（'mouseenter'，function（）{}）？移动页面是什么意思？（滚动）或在HTML脚本中移动它？请告诉我您的建议，以便我可以解决此问题？在浏览器中滚动。为了解决这个问题，我的意思是使用语义HTML，比如链接（而不是div）的锚。这个问题不是来自按钮的定位，因为我改变了按钮的颜色和不透明度，而且它们在滚动后总是在同一个位置，即使是光标行为也能很好地交互。。。但问题只存在于与错误位置交互的按钮功能（在“mouseenter”-“mouseleave”-“mousedown”）上。。。我正在使用jQuery1.8.2。有什么帮助吗？是否要在javascript中使用而不是.on（'mouseenter'，function（）{}）？您尚未修复它们<代码>绝对定位与固定定位不同绝对
相对于第一个父对象，该父对象的位置不是静态
，或者如果没有找到主体
<代码>固定
定位在窗框上。您的按钮看起来可能在同一个位置，但触发单击的HTML元素却不是。感谢gys的帮助，我发现了问题，天哪，我调用了一个导致我问题的jquery：我jst删除了它，evrything运行良好，没有定位问题；）再次感谢。干杯