根据固定的可变高度 header 自动调整主要内容部分 margin-top

Question

https://g7uuvt72cje7i7gh-26803830855.shopifypreview.com/（手机查看）目前，我知道 .main-content 有一个基于 sticky-animate 的 margin-top，它将 header 固定在移动设备的顶部。重点是，如您所见，有一个 div 可以用 X 关闭，改变高度。这不会改变边距，留下非常糟糕的 space。使用的java是：

if (jQuery(window).width() < 425) {
$(function(){
    $('.main-content').each(function(){
        var headerHeight=$('.sticky-animate').height();
        // headerHeight+=15; // maybe add an offset too?
        $(this).css('margin-top',headerHeight+'px');
    });
});
}

任何人都可以帮助我以适应的方式改进它吗？适用于隐藏栏的脚本是：

function Hide(HideID) 
{
  HideID.style.display = "none"; 
}

  <div id="right-showing">
    <a href="#" onclick="Hide(Bar);">X</a>
  </div>

希望有人能帮助我。

Answer 1

基本上您想要 re-run 柱关闭时的 header 高度函数。

我稍微调整了你的代码以避免重复。

尝试这样的事情：

function setMargin(index, element) {
    var headerHeight=$('.sticky-animate').height();
    $(element).css('margin-top',headerHeight+'px');
}

if (jQuery(window).width() < 425) {
    $(function(){
        $('.main-content').each(setMargin);
    });
}

function Hide(HideID) 
{
    HideID.style.display = "none";
    $('.main-content').each(setMargin);
}

根据固定的可变高度 header 自动调整主要内容部分 margin-top

Auto adjust margin-top of main content section based on variable hight fixed header

html

javascript

css

jquery

shopify