文章/答案/技术大牛

发布

社区首页 >问答首页 >我有这个搜索栏，我希望它有一个固定的位置，但在我的页面的某个点停止。

问我有这个搜索栏，我希望它有一个固定的位置，但在我的页面的某个点停止。
EN

Stack Overflow用户

提问于 2022-11-23 15:43:46

回答 1查看 29关注 0票数 -1

我有这个搜索栏，它有一个固定的位置，开始在我的标题，我希望它停止以上的特别优惠，我怎么做呢？我可以用css做吗，或者我需要添加java脚本吗？

html,
body {
  margin: 0;
  background-color: white;
  font-family: 'Roboto', sans-serif;
}

* {
  box-sizing: border-box;
}

#container {
  display: grid;
  height: 100vh;
  background: white;
  border: solid 2vh white;
  grid-template-rows: 0.8fr 1fr 2fr 1fr;
}


/* -------------------------------header---------------------------- */

.logo {
  margin-left: 3vh;
  height: 8vh;
  width: 22vh;
}

#header {
  display: grid;
  grid-template-columns: 2fr 10fr 1fr;
  column-gap: 3rem;
  align-items: center;
  padding-bottom: 1vh;
  border-bottom: 3px solid #ddd;
}

header>img {
  margin: 1rem;
}

.menu {
  display: grid;
  grid-template-columns: repeat(3, 3fr);
  position: relative;
  place-items: center;
}

a.menulink {
  color: #202084;
  height: 40px;
  width: 180px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 40px;
}

a.menulink:hover {
  background-color: #202084;
  color: white;
  border: solid 1px #202084;
  border-radius: 30px;
}

.utility {
  height: 7vh;
  width: 7vh;
  display: grid;
  grid-template-columns: 1fr;
  font-size: 2.5rem;
  color: #202084;
  place-items: center center;
  position: relative;
  top: -0.3vh;
}

.utility:hover {
  background-color: #202084;
  color: white;
  border: solid 1px #202084;
  border-radius: 50%;
}


/* -------------------------------Search Bar----------------------------
    */

.search {
  display: grid;
  padding-top: 2vh;
  justify-content: center;
  grid-template-rows: 1fr 1fr;
  position: fixed;
  top: 10vh;
  left: 50vh;
  z-index: 2;
}

.search-bar {
  grid-template-columns: 1fr 4fr 1fr;
  width: 70vh;
  height: 7vh;
  background: rgba(112, 107, 107, 0.5);
  display: grid;
  border-radius: 60px;
  grid-row: 2/3;
}

.search-bar input {
  line-height: 7vh;
  text-align: center;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 1.3rem;
  color: #202084;
}

.search-bar button {
  height: 50px;
  width: 50px;
  font-size: 1.5rem;
  border: 0;
  border-radius: 50%;
  background: #202084;
  color: white;
  cursor: pointer;
  grid-column: 3/4;
  position: relative;
  left: 23vh;
  bottom: 6.1vh;
  transition: transform 0.5s;
}

.search-bar button:hover {
  transform: scale(1.3);
}


/*
    -------------------------------Banner---------------------------- */

.banner {
  display: grid;
}

h1 {
  font-size: 14rem;
  font-weight: 500;
  color: #202084;
  position: relative;
  top: 25vh;
  z-index: 1;
}

.banner .sunbed {
  height: 60vh;
  width: 65vh;
  position: absolute;
  top: 30vh;
  left: 90vh;
  z-index: 1;
}

.banner .shadow {
  height: 60vh;
  width: 70vh;
  position: absolute;
  top: 55vh;
  left: 80vh;
}


/* -------------------------------Special offers---------------------------- */

.offers {
  color: #202084;
  font-size: 4rem;
  width: 50vh;
  position: absolute;
  top: 120vh;
  left: 63vh;
  border: #ddd solid 3px;
  border-radius: 10px;
  text-align: center;
  padding-left: 1vh;
  padding-right: 1vh;
}

.special {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
  justify-self: center;
}

.special1,
.special2,
.special3 {
  display: grid;
  height: 60vh;
  width: 25vw;
  margin-top: 40vh;
  margin-left: 5vh;
  margin-bottom: 30vh;
  border: #ddd solid 3px;
  border-radius: 10px;
  padding: 10px;
}

.special1 {
  grid-column: 2/3;
}

.special2 {
  grid-column: 3/4;
}

.special3 {
  grid-column: 4/5;
}

.footer {
  height: 20vh;
  color: white;
  background-color: black;
  text-align: center;
  position: absolute;
  bottom: -122vh;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/fee1c5da2d.js" crossorigin="anonymous"></script>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="styles.css" rel="stylesheet" type="text/css">
  <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
  <title>Document</title>
</head>

<body>

  <div id="container">
    <div id="header">
      <img class="logo" src="images/logo.png" alt="">
      <div class="menu">
        <a href="#" class="menulink">Booking</a>

        <a href="#" class="menulink">Profiles</a>

        <a href="#" class="menulink">About Us</a>
      </div>
      <div class="utility"><i class="fa-solid fa-user"></i></div>
    </div>

    <div id="search" class="search">
      <form action="" class="search-bar">
        <input type="text" placeholder="Location" name="q">
        <input type="text" placeholder="Date" name="q">
        <input type="text" placeholder="Time" name="q">
        <button><i class="fa-solid fa-magnifying-glass"></i></button>
      </form>
    </div>
    <div class="banner">
      <div>
        <h1>Find your <br> destination </h1>
      </div>
      <div><img class="sunbed" src="images/sunbeds.png" alt=""></div>
      <div><img class="shadow" src="images/shadow.png" alt=""></div>
    </div>
    <div class="special">
      <div class="offers">Special Offers</div>
      <div class="special1">

      </div>

      <div class="special2">

      </div>

      <div class="special3">

      </div>

    </div>

  </div>
  <div class="footer">[Footer]</div>
</body>

</html>

javascript

html

css

回答 1

Stack Overflow用户

发布于 2022-11-24 02:48:50

我想你要找的是position: sticky，正如这里解释的那样。

所以是的，它可以用CSS来完成。

body {
  max-height: 450px;
  margin: 0;
}

.header {
  margin: 10px;
  border: 1px solid black;
  height: 80px;
}

.sticky-container {
  position: relative;
  background-color: gray;
}

nav {
  position: sticky;
  top: 0;
  /* styling */
  background-color: blue;
  padding: 10px;
  color: white;
  font-weight: bold;
  text-align: center;
}

.more-content {
  height: 400px;
  margin: 10px;
  border: 1px solid black;
}

.specials {
  margin: 10px;
  border: 1px solid black;
}

<html>

<body>
  <div class='header'>my header</div>
  <div class='sticky-container'>
    <nav>my navbar</nav>
    <div class='more-content'>some random content</div>
  </div>
  <div class='specials'>my specials</div>
  <div class='more-content'>some random content</div>
</body>

</html>

导航上的样式设置了position: sticky和top: 0，这意味着它在滚动时会粘在窗口的顶部，只要它的锚被渲染。锚点是由它与position: relative最近的父节点定义的。在本例中，这是div.sticky-container。

nav {
  position: sticky; /* tells the element to act 'fixed' within it's
  parent container */
  top: 0; /* sets the nav at the top of the container or highest point
  of the container still on the screen */
}

.sticky-container {
  position: relative; /* makes sure that this container is seen
  as an anchor by the 'sticky' navbar */
}

您可能想要摆弄一下如何在HTML中构造节，但是如果我正确理解，这应该是有用的。

希望这能有所帮助！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74549496

复制

相似问题

问我有这个搜索栏，我希望它有一个固定的位置，但在我的页面的某个点停止。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我有这个搜索栏，我希望它有一个固定的位置，但在我的页面的某个点停止。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我有这个搜索栏，我希望它有一个固定的位置，但在我的页面的某个点停止。
EN