我的响应式设计布局
以上链接是我的响应式设计布局。
固定页眉高度可根据个人电脑、平板电脑及;手机版。同样,锚函数也从固定头调整。锚函数有一个bug。当我缩小网页浏览器的宽度时,标题会变高。锚功能是不自动工作,我需要点击F5刷新网页,以激活该功能。我如何修复这个bug?
下面是我的css和js代码: var menuContainer = $('header').height();
function scrollToAnchor(anchorName) {
var aTag = $("div[name='" + anchorName + "']");
$('html,body').animate({
scrollTop: aTag.offset().top - menuContainer
}, 'slow');
console.log(anchorName);
}
css编码#subnav {
height: 100%;
margin-right: auto;
width: 100%;
background-color: #FFFFFF;
font-size: 120%;
}
#submenu ul {
padding: 0;
margin-top: 4px;
margin-right: auto;
margin-left: 0%;
margin-bottom: 0;
width: 650px;
}
#submenu li {
float: left;
}
#submenu li a {
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
border-right: 1px solid #294C52;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.submenu-active {
background-color: #294C52;
color: #FFFFFF;
}
a {
color: #294C52;
}
试试这个:
var menuContainer = $('header').height();
function scrollToAnchor(anchorName) {
var aTag = $("div[name='" + anchorName + "']");
$('html,body').animate({
scrollTop: aTag.offset().top - menuContainer
}, 'slow');
console.log(anchorName);
}
$(window).on('resize', function(event) {
menuContainer = $('header').height();
});
现在取决于何时调用函数,它应该工作。如果你想让它在调整大小时自动工作,调用事件处理程序中的函数。