0

在尝试使用视差滚动创建单页模板时，我发现了一个奇怪的问题。我怀疑问题出在 jQuery 部分，甚至可能是它自己的 CSS，但我不太确定。

我当前的 jQuery 代码位读取访问者浏览器的窗口大小，并为每个不同的锚定页面调整幻灯片的高度。这样，无论窗口大小如何，我都可以完全使用背景。但同时我意识到，如果我添加不同的 CSS 组件，它们不会扩大活动锚背景高度，而是会溢出到另一张幻灯片上。

这是负责幻灯片高度的 jQuery 部分

 $(function () {
     $('.windows').css({
         'height': (($(window).height())) + 'px'
     });

     $(window).resize(function () {
         $('.windows').css({
             'height': (($(window).height())) + 'px'
         });
     });

 });

这是网站 URL https://docstax.net/esgh/

转到计划并调整浏览器的大小，您会明白我的意思，即不根据内部所需的内容高度调整幻灯片的高度。

编辑：正如 putvande 所建议的那样，我知道有很多 $(window) 的方法，我更新并最小化了代码。

4

3 回答 3

0

基本上，如果内容对于容器来说太大，您不希望手动向 div 添加高度组件。这是我认为可行的方法：

   $(window).bind("load", function()                                                                                                                                                                                        
     {                                                                                                                                                                                                                 
         var windowHeight = $(window).height();                                                                                                                                                                        
         $('.windows').each(function(index) {                                                                                                                                                                          
           if ($(this).height() < windowHeight) {                                                                                                                                                                      
             $(this).height(windowHeight);                                                                                                                                                                             
           }                                                                                                                                                                                                           
         }); 
         $(window).resize(function() {
            var windowHeight = $(window).height();                                                                                                                                                                        
            $('.windows').each(function(index) {                                                                                                                                                                          
               if ($(this).height() < windowHeight) {                                                                                                                                                                      
                  $(this).height(windowHeight);                                                                                                                                                                             
                }                                                                                                                                                                                                           
            });
          });
      });
于 2013-09-01T18:46:37.573 回答
0

你可以试试这样：

<script type="text/javascript">
$(function(){
    var height = window.innerHeight;
    $('.windows') .css({'height': height+'px'});
    $(window).resize(function() {
        var reheight = window.innerHeight;
        $('.windows') .css({'height': reheight+'px'});
    });
});
</script>
于 2013-09-01T18:49:53.947 回答
0

我尝试了您的页面，但没有发现问题：这些部分已按应有的大小调整大小。内容是显示的，因为它应该考虑应用的样式。当一个部分小于其内容时，内容开始在其他页面上溢出。完全正常。您可以设置 overflow: hidden;您的.windows以防止这种情况发生和/或使用媒体查询来调整内容的大小。

顺便说一下，这是一个更轻的功能，只是编辑了您的代码：

$(function() {
    $(window).resize(function() {
        $('.windows').css({ 'height': $(window).height() });
    }).resize();
});

无需编写两次代码：设置调整大小处理程序并手动触发它应该可以。写一次，所以当你需要改变它时，你只会改变它一次。您还可以在调整大小处理程序中重置 de scrollTop 以将注意力集中在页面的同一部分。

于 2013-09-02T06:05:04.333 回答