私はJavaScriptにかなり慣れていないので、一日中これにこだわっています。画面解像度に従って要素のサイズを変更するスクリプトがありますが、「要素がドキュメントに存在しない場合は、追加の値「242px」を contentContainer.css メソッドに追加する」必要があることを除いて、すべて機能します。この要素は、ページ上にないときに asideContent 要素のスペースを占有します...
<script>
// DOM Container Resize Handler
var extra = ($("body.asideContent").length == 0) ? 242 : 0;
var adjustStyle = function() {
var winWidth = $(window).width(),
width = parseInt(winWidth),
container = $('body .fixed');
contentContainer = $('body .content');
if (width >= 1454) {
container.css('width','1454px');
contentContainer.css('width',extra + 1210 + "px");
} else if ((width < 1454) & (width >= 1212)) {
container.css('width','1212px');
contentContainer.css('width',extra + 968 + "px");
} else {
container.css('width','970px');
contentContainer.css('width',extra + 726 + "px");
}
};
$(function() {
var filterWrap = $("#filterWrap"),
offset = filterWrap.offset(),
topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
filterWrap.stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
filterWrap.stop().animate({
marginTop: 0
});
};
});
// DOM Container Resize Handler - Initialization
$(window).resize(function() {
adjustStyle();
});
adjustStyle();
});
</script>
常にエクストラを適用しています。これを適用したいのは、("body.asideContent") がドキュメントにない場合のみです。
html をテストする
<html>
<head>
</head>
<body>
<div class="fixed">
<div id="container">
<div class="asideContent"> </div>
<div class="content"> </div>
</div>
</div>
</body>
</html>
あなたが私に与えることができるどんな助けにも前もって感謝したいと思います...それは私を一日中夢中にさせていました...