0

[根据您的评论编辑]

我正在寻求将一个边距顶部动态分配给一个位于固定 div（标题）下方的 div（.main），其尺寸因滚动位置而异。当处于顶部位置 (.smart) 时，此边距顶部应等于 (header) 的高度。

以下代码几乎可以顺利运行：

   //first function to check the width of the page and assign a margin-top equal to           
   //header.outerHeight in its default position

    function checkWidth(){
    var winInnW = window.innerWidth;
    var $headerHeight;

if(winInnW<=640){
       $('header').addClass('smart');
       var $headerHeight = $('header.smart').outerHeight(true);
        $('.main').css({'marginTop': $headerHeight});
    }
    else
    {
        $('header').removeClass('smart');

    }

if((winInnW>640) && (winInnW<1280)){
       $('header').addClass('medium');
       var $headerHeight = $('header.medium').outerHeight(true);
        $('.main').css({'marginTop': $headerHeight});
    }
    else
    {
        $('header').removeClass('medium');

    }

if(winInnW>=1280){
       $('header').addClass('large');
       var $headerHeight = $('header.large').outerHeight(true);
        $('.main').css({'marginTop': $headerHeight});
    }
    else
    {
        $('header').removeClass('large');
    }}

checkWidth();
$(window).on('resize load', checkWidth);


// second function that checks the scroll hiatus and applies styles accordingly called 
//on scroll movement only
function checkScroll(){
    var y_scroll_pos = window.pageYOffset;
    var scroll_pos_test = 10;
    if(y_scroll_pos > scroll_pos_test){
        $('header').addClass('lower');
    }

    else{
        $('header').removeClass('lower')
    }}

$(window).on('scroll', checkScroll);

这里的问题：

  • 在某些小窗口上第一次打开页面时，仍然需要刷新以调整边距（关闭和随后以相同分辨率重新打开页面似乎工作正常）
  • 即时调整到更小的窗口大小，边距无法调整并需要刷新

关于我做错了什么的任何指示？

赞赏！

4

0 回答 0