当前位置： 文江博客话题详情

如何使用尾风CSS使我的粘性纳维托（Navbar）上班？

发布于 2025-01-29 09:13:15 字数 5156 浏览 2 评论 0原文

我正在使用parwindcss在网站上工作。但是出于某种原因，使用“粘性”类时，Navbar无法正常工作。我尝试使用“固定”类，但这与横幅不起作用。我也试图使用：

nav {
    position: -webkit-sticky;
    position: sticky;
}

但这很久。我还使用了其他一些CSS和JavaScript来对搜索栏进行样式。 如何让Navbar始终坚持？

这是导航和横幅的代码：

<div>
    <div> 
        <nav class="sticky w-full md:flex md:justify-between md:items-center md:flex-wrap px-10 md:px-48 bg-gray-200 py-2"> <!--Navigation-->
            <div class="flex md:flex justify-between md:items-center"> <!--Title och Burger button-->
                <h1 class="text-xl text-emerald-600">
                        <a href="">Logo</a>
                </h1>
            <div class="px-4 mt-1 justify-end cursor-pointer md:hidden"  id="burger">
                    <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                      </svg>
                </div>    
            </div>
            <ul class="md:flex md:flex-1 hidden md:justify-around" id="menu">
                <li class="text-">
                    <a href="" class="border-l-4 border-green-500 text-ford-300 text-green-400 md:border-l-0 md:hover:border-b-4">Home</a>
                </li>
                <li class="">
                    <a href="" class="md:border-gray-500 md:hover:border-b-4 hover:text-gray-700">About</a>
                </li>
                <li class="">
                    <a href="" class="md:border-gray-500 md:hover:border-b-4 hover:text-gray-700">Products</a>
                </li>
            </ul>
            <div class="input-container"> <!--Searchbar-->
                <input id="in" type="search" placeholder="Search for product" class="border-gray-black rounded-md p-0 input-search-field pl-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hero" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
                    <button class="md:pr-5">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    </button>
            </div>
                    
            <div class=""> <!--Login/Signup-->
                <a href="#" class="text-green-700 rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider border-green-700 md:border-2 hover:bg-green-700 hover:text-white transition ease-in-out duration-500">Log in</a>
                <a href="#" class="text-green-700 ml-2 rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider border-green-700 md:border-2 hover:bg-green-700 hover:text-white transition ease-in-out duration-500">Sign up</a>
            </div>
        </nav>
    </div>
        
    <div class="relative w-full container"> <!--Banner-->
        <img src="img/Banner.png" alt="">
        <button class="btn px-4 py-3 bg-blue-600 rounded-md hover:bg-blue-700 transition ease-in-out"><a href="#">Check our products</a></button>
    </div>
    <main class="">
    </main>
</div>

我用于搜索栏的CSS代码：

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    nav {
        position: -webkit-sticky;
        position: sticky;
    }
    
     .input-search-field::-webkit-search-cancel-button { 
        -webkit-appearance: none;
        border-radius: 20px;
    
    }
    
    .input-search-field[type="search"] {
        position: relative;
    }
    .input-container {
        display: flex;
        align-items: center;
        position: relative;
    }
    .hero {
        width: 15px;
        position: absolute;
        left: 150px;
        cursor: pointer;
    } 
    
    .container .btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
}

JavaScript：

var result = document.querySelector('.hero').addEventListener('click', myfunction)
function myfunction() {

var input = document.querySelector('#in').value="";

}
console.log(result);

const burger = document.querySelector('#burger');
const menu = document.querySelector('#menu');

burger.addEventListener('click', () => {
    if (menu.classList.contains('hidden')) {
        menu.classList.remove('hidden');
    } else {
    menu.classList.add('hidden');
    }
})
原文

I am working on a website using tailwindcss. But for some reason the navbar wont work when using the "sticky" class. I tried using the "fixed" class instead, but that did not work with the banner. I have also tried to use:

nav {
    position: -webkit-sticky;
    position: sticky;
}

but it has been usuccessful. I have also used some other css and javascript to style the searchbar how i want it.
How can i get the navbar to always stick?

Here is the code for the nav and the banner:

<div>
    <div> 
        <nav class="sticky w-full md:flex md:justify-between md:items-center md:flex-wrap px-10 md:px-48 bg-gray-200 py-2"> <!--Navigation-->
            <div class="flex md:flex justify-between md:items-center"> <!--Title och Burger button-->
                <h1 class="text-xl text-emerald-600">
                        <a href="">Logo</a>
                </h1>
            <div class="px-4 mt-1 justify-end cursor-pointer md:hidden"  id="burger">
                    <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                      </svg>
                </div>    
            </div>
            <ul class="md:flex md:flex-1 hidden md:justify-around" id="menu">
                <li class="text-">
                    <a href="" class="border-l-4 border-green-500 text-ford-300 text-green-400 md:border-l-0 md:hover:border-b-4">Home</a>
                </li>
                <li class="">
                    <a href="" class="md:border-gray-500 md:hover:border-b-4 hover:text-gray-700">About</a>
                </li>
                <li class="">
                    <a href="" class="md:border-gray-500 md:hover:border-b-4 hover:text-gray-700">Products</a>
                </li>
            </ul>
            <div class="input-container"> <!--Searchbar-->
                <input id="in" type="search" placeholder="Search for product" class="border-gray-black rounded-md p-0 input-search-field pl-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hero" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
                    <button class="md:pr-5">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    </button>
            </div>
                    
            <div class=""> <!--Login/Signup-->
                <a href="#" class="text-green-700 rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider border-green-700 md:border-2 hover:bg-green-700 hover:text-white transition ease-in-out duration-500">Log in</a>
                <a href="#" class="text-green-700 ml-2 rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider border-green-700 md:border-2 hover:bg-green-700 hover:text-white transition ease-in-out duration-500">Sign up</a>
            </div>
        </nav>
    </div>
        
    <div class="relative w-full container"> <!--Banner-->
        <img src="img/Banner.png" alt="">
        <button class="btn px-4 py-3 bg-blue-600 rounded-md hover:bg-blue-700 transition ease-in-out"><a href="#">Check our products</a></button>
    </div>
    <main class="">
    </main>
</div>

The css code i used for the searchbar:

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    nav {
        position: -webkit-sticky;
        position: sticky;
    }
    
     .input-search-field::-webkit-search-cancel-button { 
        -webkit-appearance: none;
        border-radius: 20px;
    
    }
    
    .input-search-field[type="search"] {
        position: relative;
    }
    .input-container {
        display: flex;
        align-items: center;
        position: relative;
    }
    .hero {
        width: 15px;
        position: absolute;
        left: 150px;
        cursor: pointer;
    } 
    
    .container .btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
}

Javascript:

var result = document.querySelector('.hero').addEventListener('click', myfunction)
function myfunction() {

var input = document.querySelector('#in').value="";

}
console.log(result);

const burger = document.querySelector('#burger');
const menu = document.querySelector('#menu');

burger.addEventListener('click', () => {
    if (menu.classList.contains('hidden')) {
        menu.classList.remove('hidden');
    } else {
    menu.classList.add('hidden');
    }
})

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

雪若未夕 2025-02-05 09:13:15

您必须给出位置粘性以不在nav中的div，并且还使用顶部：0px;

HTML代码

<div class="sti"> 
        <nav class="sticky w-full md:flex md:justify-between md:items-center md:flex-wrap px-10 md:px-48 bg-gray-200 py-2"> <!--Navigation-->
            <div class="flex md:flex justify-between md:items-center"> <!--Title och Burger button-->
                <h1 class="text-xl text-emerald-600">
                        <a href="">Logo</a>
                </h1>
            <div class="px-4 mt-1 justify-end cursor-pointer md:hidden"  id="burger">
                    <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                      </svg>
                </div>    
            </div>
            <ul class="md:flex md:flex-1 hidden md:justify-around" id="menu">
                <li class="text-">
                    <a href="" class="border-l-4 border-green-500 text-ford-300 text-green-400 md:border-l-0 md:hover:border-b-4">Home</a>
                </li>
                <li class="">
                    <a href="" class="md:border-gray-500 md:hover:border-b-4 hover:text-gray-700">About</a>
                </li>
                <li class="">
                    <a href="" class="md:border-gray-500 md:hover:border-b-4 hover:text-gray-700">Products</a>
                </li>
            </ul>
            <div class="input-container"> <!--Searchbar-->
                <input id="in" type="search" placeholder="Search for product" class="border-gray-black rounded-md p-0 input-search-field pl-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hero" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
                    <button class="md:pr-5">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    </button>
            </div>
                    
            <div class=""> <!--Login/Signup-->
                <a href="#" class="text-green-700 rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider border-green-700 md:border-2 hover:bg-green-700 hover:text-white transition ease-in-out duration-500">Log in</a>
                <a href="#" class="text-green-700 ml-2 rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider border-green-700 md:border-2 hover:bg-green-700 hover:text-white transition ease-in-out duration-500">Sign up</a>
            </div>
        </nav>
    </div>

CSS代码

.sti {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
}

You have to give position sticky to div not in nav and also use top:0px;

HTML Code

<div class="sti"> 
        <nav class="sticky w-full md:flex md:justify-between md:items-center md:flex-wrap px-10 md:px-48 bg-gray-200 py-2"> <!--Navigation-->
            <div class="flex md:flex justify-between md:items-center"> <!--Title och Burger button-->
                <h1 class="text-xl text-emerald-600">
                        <a href="">Logo</a>
                </h1>
            <div class="px-4 mt-1 justify-end cursor-pointer md:hidden"  id="burger">
                    <svg class="w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
                      </svg>
                </div>    
            </div>
            <ul class="md:flex md:flex-1 hidden md:justify-around" id="menu">
                <li class="text-">
                    <a href="" class="border-l-4 border-green-500 text-ford-300 text-green-400 md:border-l-0 md:hover:border-b-4">Home</a>
                </li>
                <li class="">
                    <a href="" class="md:border-gray-500 md:hover:border-b-4 hover:text-gray-700">About</a>
                </li>
                <li class="">
                    <a href="" class="md:border-gray-500 md:hover:border-b-4 hover:text-gray-700">Products</a>
                </li>
            </ul>
            <div class="input-container"> <!--Searchbar-->
                <input id="in" type="search" placeholder="Search for product" class="border-gray-black rounded-md p-0 input-search-field pl-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hero" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
                    <button class="md:pr-5">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    </button>
            </div>
                    
            <div class=""> <!--Login/Signup-->
                <a href="#" class="text-green-700 rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider border-green-700 md:border-2 hover:bg-green-700 hover:text-white transition ease-in-out duration-500">Log in</a>
                <a href="#" class="text-green-700 ml-2 rounded-full py-2 px-3 uppercase text-xs font-bold cursor-pointer tracking-wider border-green-700 md:border-2 hover:bg-green-700 hover:text-white transition ease-in-out duration-500">Sign up</a>
            </div>
        </nav>
    </div>

CSS Code

.sti {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
}
回复 原文
~没有更多了~

关于作者

甜心小果奶

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

十二

文章 0 评论 0

飞烟轻若梦

文章 0 评论 0

OPleyuhuo

文章 0 评论 0

wxb0109

文章 0 评论 0

旧城空念

文章 0 评论 0

-小熊_

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文