我发现了一些脚本可以做我想做的事情。此脚本上下移动我的框和单击事件,并将我的div调整为窗口高度的百分比。不幸的是,如果某人调整了浏览器窗口的大小,则div不会继续调整大小。我尝试从click事件中取出高度窗口函数,并将其放在它下面和/或在此站点上找到其他调整大小的脚本,但没有任何反应。它仅在此单击事件上调整大小。你能帮忙吗?
我的div标签锚定在浏览器窗口的底部并向上滑动。
jQuery(function( $ ){
var container = $( "#content" );
$( "a" ).click(
function( event ){
$('#content').height(function(){
return $(window).height() * 0.47;
});
event.preventDefault();
if (container.is( ":visible" )){
container.slideUp( 500 );
} else {
container.slideDown( 500 );
}
}
);
});
答案 0 :(得分:0)
我建议添加一个调整大小的侦听器,并将你的实际逻辑分解为:
jQuery(function( $ ){
var resizeFunction = function(event){
$('#content').height(function(){
return $(window).height() * 0.47;
});
if (event != null){
event.preventDefault();
}
if (container.is( ":visible" )){
container.slideUp( 500 );
} else {
container.slideDown( 500 );
}
}
var container = $( "#content" );
$( "a" ).click(resizeFunction(event))
$(window).resize(resizeFunction(null))
});
答案 1 :(得分:0)
您需要侦听窗口调整大小事件并调整内容容器的大小。
$(window).on('resize', function() {
if (container.is(':visible')) {
container.height(function() {
return $(window).height() * 0.47;
});
}
});