当用户调整浏览器大小时，将标题修复到浏览器问题的顶部 [英] Fix header to top of browser issue when user resizes the browser

问题描述

我的固定可滚动标头存在问题，基本上它的工作方式是标头是可滚动的，一旦标头到达浏览器的顶部，它便变得固定了，到目前为止，它工作得很好.

I've got an issue with my fixed scrollable header, basically the way it works is the header is scrollable, once the header reaches the top of the browser it then becomes fixed, so far this works perfectly fine.

问题是，当用户调整浏览器高度的大小时，为了使其正常工作，用户需要刷新页面，任何人都知道我如何编辑脚本才能在用户调整大小后工作，我尝试使用.resize，但是我的代码无法正常工作.

The issue is, when the user resizes the browser height, in order for it to work correctly the user needs to refresh the page, anyone know how I can edit the script in order to work after the user resizes, I tried using .resize but my code doesn't work correctly.

这是工作代码的小提琴: http://jsfiddle.net/c9cbvj58/2/

here's a fiddle of the working code: http://jsfiddle.net/c9cbvj58/2/

这是我使用.resize编辑的代码:无效，但是我添加了此代码以显示自己的工作.

Here's my edited code using .resize: that doesn't work but i've added this to show what i've done.

jQuery(document).ready(function($) {
var elementPosition = $('header').offset();

var fixFunction = $(window).scroll(function(){
    if($(window).scrollTop() > elementPosition.top){
        $('header').addClass("stick");
    } else {
        $('header').removeClass("stick");
    }    
});

$(window).bind('resize', function() {
    fixFunction();
}).trigger('resize');

});

谢谢

推荐答案

演示

$(window).resize(function(){
    elementPosition = $('header').offset();
});

更改高度时必须更新偏移量

When change the height must update the offset

这篇关于当用户调整浏览器大小时，将标题修复到浏览器问题的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！