jquery - 在其他 div 的滚动上修复容器 div

标签 jquery css fixed scrolltop

我在滚动到某个点时固定容器 div 位置而不牺牲我的其余 css 布局时遇到问题。

我试图在向下滚动时使包装器 profile_overview 和指示器定位固定。但是，每次添加相应的 CSS 类时，布局都会被破坏。 

$(".profile_right").scroll(function() {
        if ($(".profile_right").scrollTop() <= 1) {
           $('.profile_overview').removeClass('adjust_height_profile');
        } else {
            $('.profile_overview').addClass('adjust_height_profile');
        }
    });
html {
  overflow-y: hidden;
  overflow-x: hidden;
}

body {
  margin: 0px;
  padding: 0px;
  background-color: transparent;
  font-family: 'Arial', sans-serif;
}


::-webkit-scrollbar {
  display: none;
}

/* Styling of the main wrapper + setting up the left and right side of the user.php page */
.main_wrapper {
  width: 100%;
  height: 100vh;
}

/*
*===========================================
*/

/* Left hand side navigation items */
.nav_items_left {
  width: 5%;
  height: 100vh;
  float: left;
  background-color: green;
}

/*
*===========================================
*/

/* Right hand side profile content */
.profile_right {
  width: 95%;
  height: 100vh;
  float: right;
  background-color: yellow;
  overflow: scroll;
  overflow-x: hidden;
}

.header_profiles {
  width: 100%;
  height: 5vh;
}

/*
*===========================================
*/

.profile_overview {
  margin-top: 2%;
  width: 100%;
  height: 40vh;
  display: flex;
  justify-content: space-between;
  transition: 0.4s ease-in-out;
  transition-delay: 1s;
}

.adjust_height_profile {
  height: 10vh;
  transition: 0.2s ease-in-out;
  position: fixed;
}

.profile_container {
  width: 22.5%;
  height: 100%;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  cursor: pointer;
}

/* Active indicator */
.active_indicator {
  width: 100%;
  height: 0.5vh;
  display: flex;
  justify-content: space-between;
  margin: 1% 0 1% 0;
}

.active_profile_indicator {
  width: 22.5%;
  background-color: lightgrey;
  border-radius: 8px;
}
<!DOCTYPE html>
<html lang="DE">
<head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

<!-- Wrapper around navigation items and profile overview -->
<div class="main_wrapper">

    <!-- Nav items positioned on the left hand side -->
    <div class="nav_items_left">

    </div>


    <!-- Profiles positioned on the right hand side -->
    <div class="profile_right">

        <div class="header_profiles">
          
        </div>


        <!-- ========================================= -->

        <!-- Different blocks -->

        <main>

            <div class="profile_overview">

                <!-- Block 1 -->
                <div class="profile_container">
                </div>

                <!-- Block 2 -->
                <div class="profile_container">
                </div>

                <!-- Block 3 -->
                <div class="profile_container">
                </div>

                <!-- Block 4 -->
                <div class="profile_container">
                </div>

            </div>

            <!-- ========================================= -->

            <!-- Show which profile is active -->
            <div class="active_indicator">
                <div class="active_profile_indicator"></div>
                <div class="active_profile_indicator"></div>
                <div class="active_profile_indicator"></div>
                <div class="active_profile_indicator"></div>
            </div>
            
            <!-- ======================================== --> 
            
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            
           
        </main>
    </div>
</div>

</body>
</html>

目标是降低由滚动触发的右侧 4 个 block 的高度，同时使它们固定在屏幕顶部。这同样适用于下方的指标，也应修复。

非常感谢任何帮助

最佳答案

布局“中断”的原因是因为将标题设置为 fixed定位使其脱离正常布局。就像absolute定位，这意味着它过去在文档中占用的空间被删除了，所以你会看到 <p>test</p>当 adjust_height_profile 时，元素向上移动到那个空白空间添加了类。

最直接的解决方案是申请 position: fixed始终添加到 profile_overview header ，并为其后的元素添加边距。但是，您仍然会看到标题后面“滚动”的内容，因为您应用了上边距并且没有指定背景颜色。这意味着当非固定内容滚动时，它将通过标题显示。您需要将 header 附加到容器顶部并替换 margin-top: 2%与 padding-top: 2% ;

您的 active_indicator 容器不是 profile_overview header 的一部分是否有原因？

<!DOCTYPE html>
<html>

<head>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <style>
    html {
      overflow-y: hidden;
      overflow-x: hidden;
    }
    
    body {
      margin: 0px;
      padding: 0px;
      background-color: transparent;
      font-family: 'Arial', sans-serif;
    }
    
    ::-webkit-scrollbar {
      display: none;
    }
    /* Styling of the main wrapper + setting up the left and right side of the user.php page */
    
    .main_wrapper {
      width: 100%;
      height: 100vh;
    }
    /*
*===========================================
*/
    /* Left hand side navigation items */
    
    .nav_items_left {
      width: 5%;
      height: 100vh;
      float: left;
      background-color: green;
    }
    /*
*===========================================
*/
    /* Right hand side profile content */
    
    .profile_right {
      width: 95%;
      height: 100vh;
      float: right;
      background-color: yellow;
      overflow: scroll;
      overflow-x: hidden;
    }
    
    .header_profiles {
      width: 100%;
      height: 5vh;
    }
    /*
*===========================================
*/
    
    .profile_overview {
      width: 100%;
      height: 40vh;
      display: flex;
      justify-content: space-between;
      transition: 0.4s ease-in-out;
      transition-delay: .5s;
      /* This is changed */
      padding-top: 2%;
      /* margin-top: 2%; */
      position: fixed;
      top: 0;
      background-color: yellow;
    }
    
    .adjust_height_profile {
      height: 10vh;
      transition: 0.2s ease-in-out;
      /*position: fixed;*/
    }
    
    .profile_container {
      width: 22.5%;
      height: 100%;
      border-radius: 8px;
      background-color: white;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      cursor: pointer;
    }
    /* Active indicator */
    
    .active_indicator {
      width: 100%;
      height: 0.5vh;
      display: flex;
      justify-content: space-between;
      margin: 1% 0 1% 0;
    }
    
    .active_profile_indicator {
      width: 22.5%;
      background-color: lightgrey;
      border-radius: 8px;
    }
    /* This is added */
    
    .content {
      margin-top: 40vh;
    }
    
    .adjust_height_profile+.content {
      margin-top: 10vh;
    }
  </style>
</head>

<body>

  <!-- Wrapper around navigation items and profile overview -->
  <div class="main_wrapper">

    <!-- Nav items positioned on the left hand side -->
    <div class="nav_items_left">

    </div>


    <!-- Profiles positioned on the right hand side -->
    <div class="profile_right">

      <div class="header_profiles">

      </div>


      <!-- ========================================= -->

      <!-- Different blocks -->

      <main>

        <div class="profile_overview">

          <!-- Block 1 -->
          <div class="profile_container">
          </div>

          <!-- Block 2 -->
          <div class="profile_container">
          </div>

          <!-- Block 3 -->
          <div class="profile_container">
          </div>

          <!-- Block 4 -->
          <div class="profile_container">
          </div>

        </div>

        <!-- ========================================= -->

        <!-- Show which profile is active -->
        <div class="active_indicator">
          <div class="active_profile_indicator"></div>
          <div class="active_profile_indicator"></div>
          <div class="active_profile_indicator"></div>
          <div class="active_profile_indicator"></div>
        </div>

        <!-- ======================================== -->
        <div class="content">
          <p>test 1</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
          <p>test</p>
        </div>

      </main>
    </div>
  </div>

</body>

</html>

<script>
  $(".profile_right").scroll(function() {
    if ($(".profile_right").scrollTop() <= 1) {
      $('.profile_overview').removeClass('adjust_height_profile');
    } else {
      $('.profile_overview').addClass('adjust_height_profile');
    }
  });
</script>

关于jquery - 在其他 div 的滚动上修复容器 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57153799/

上一篇：html - 如何在特定情况下跳过一些修改过的 CSS 组件而使用原来的 CSS 组件？

下一篇：css - 是什么让按钮在给定显示 :block? 时不会增长到 100% 宽度

相关文章：

html - 修改div外观区域

ios - 修复了 iOS 版谷歌地图上的标记

javascript - 为什么这个 JS 会触发部分呈现在一页上而不是另一页上的表单？

javascript - Jquery:获取 CSS 或样式

jQuery 按文本选择 Href

javascript - JS - 在滚动上显示模式并防止其在关闭后再次显示

jquery - 检测不同类型的滚动条(例如正常/隐藏的 osx)

css - 推特、YouTube 等的网站 Logo

html - 防止没有 nowrap 的包装

Javascript对象固定滚动

©2024 IT工具网  联系我们