Question

[根据您的评论编辑]

我正在寻求动态地将一个margin-top分配给div（.main），该div低于固定的div（标题），其尺寸根据滚动定位而变化。当处于上方位置（.smart）时，此margin-top应等于（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);

这里的问题：

首先在某些小窗口上打开页面时，它仍然需要刷新以调整边距（关闭和随后以相同分辨率重新打开页面似乎工作正常）
动态调整为较小的窗口大小，边距无法调整并进行刷新

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

赞赏！

刷新前和调整大小时不正确的outerHeight

0 个答案: