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

在使用引导程序时，如何在DIV中获得徽标粘性？

发布于 2025-02-13 02:23:36 字数 6598 浏览 1 评论 0原文

我正在尝试将徽标贴在页面顶部，但我无法做到这一点。 我已经尝试过：

#logo {
position: sticky; 
top:0
}

我还检查是否有溢流属性，但我什么也没发现，我还使用Bootstrap Framework版本5。

这是我放置徽标的部分：

<div class="container" id="header">
    <div class="row">
        <div class="col-4 col-md-3 align-items-start d-flex">
            <img src="../media/logos/mb-logo.png" id="logo" class="img-fluid" alt="logo">
        </div>
        <div class="col-7 col-md-8 align-items-end justify-content-end d-flex" id="menu_mobile">
            <div class="row">
                <div class="col-12 justify-content-end d-flex">
                    <span class="menu_item">about me</span>
                </div>
                <div class="col-12 justify-content-end d-flex">
                    <span class="menu_item">competencies</span>
                </div>
                <div class="col-12 justify-content-end d-flex">
                    <span class="menu_item">portfolio</span>
                </div>
                <div class="col-12 justify-content-end d-flex">
                    <span class="menu_item">contact</span>
                </div>
            </div>
        </div>
        <div class="col justify-content-end align-items-center d-flex" id="menu_desk">
            <span class="menu_item_desk">about me</span>
            <span class="menu_item_desk">competencies</span>
            <span class="menu_item_desk">portfolio</span>
            <span class="menu_item_desk">contact</span>

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

有人可以帮助我吗？

编辑：尝试@fork发布的解决方案之后：

<div class="container" id="header">
    <div class="row">
        <div class="col-4 col-md-3 align-items-start d-flex " >
            <img src="../media/logos/mb-logo.png" id="logo" class="img-fluid position-fixed top-0" alt="logo">
        </div>

徽标在我向下滚动时保持在位，但其他元素会改变性格。我设法修复了它们，添加了一些桨板和保证金

编辑2：这是片段，因此，由于叉子现在正常工作，我想完成的另一件事是，当页面滚动时，图像在页面上方上方，以获取很小的小页。少量。我找到了这个小提琴，但并不是我的意思 https://jsfiddle.net/z2r40y8c/ 。图像需要以指定数量的像素为单位。

html {
    scroll-behavior: smooth;
  }
body {
    width: 100%;
    height: 2000px
}

a{
    text-decoration: none;
}

.container {
    max-width: 100%;
    padding: 0%;
    margin: 0%;
}

body{
    background-color: #161616;
}
#logo {
 margin-left: 25px !important;
 position: fixed;
 top:0
}
.menu_mobile{
    padding-top: 5%;
}

.menu_item {
    font-family: 'sublimaextrabold';
    font-size: 18px;
    color: rgba(112,112,112,1);
    padding-bottom: 5%;
    cursor: pointer;
}
@media only screen and (min-width: 810px) {

#menu_mobile {
    display: none !important;
}

}
@media only screen and (max-width: 810px) {

    #menu_desk {
        display: none !important;
    }
    
    }
.menu_item_desk {
    font-family: 'sublimaextrabold';
    color: rgba(112,112,112,1);
    padding-left: 5%;
    font-size: 30px;
    cursor: pointer;
    padding-top: 5%;
}
@media only screen and (max-width: 1197px) {
    .menu_item_desk {
        font-size: 24px;
    }
}
@media only screen and (max-width: 993px) {
    .menu_item_desk {
        font-size: 20px;
    }
}
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MB</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="../html/style.css">
</head>

<body ondragstart="return false;" ondrop="return false;">

<div class="container" id="header">
        <div class="row">
            <div class="col-sm-12">
                <div class="container">
                    <div class="col-sm-3 align-items-start d-flex">
                        <img src="https://www.startpage.com/av/proxy-image?piurl=https%3A%2F%2Fdictionary.cambridge.org%2Ffr%2Fimages%2Fthumb%2Foblong_noun_002_25303.jpg%3Fversion%3D5.0.245&sp=1657096049T030f5c6f84a41f399845576d2d63d9849144e614f9e0077172506ae40946828e" id="logo" class="img-fluid position-fixed top-0" alt="logo">
                    </div>
                    <div class="col-sm-11 d-flex justify-content-end align-items-center " id="menu_desk">
                        <span class="menu_item_desk">section 1</span>
                        <span class="menu_item_desk">section 2</span>
                        <span class="menu_item_desk">section 3</span>
                        <span class="menu_item_desk">section 4</span>
                    </div>
                    <div class="col-11 align-items-end pt-3 justify-content-end d-flex" id="menu_mobile">
                        <div class="row">
                            <div class="col-12 justify-content-end d-flex">
                                <span class="menu_item">section 1</span>
                            </div>
                            <div class="col-12 justify-content-end d-flex">
                                <span class="menu_item">section 2</span>
                            </div>
                            <div class="col-12 justify-content-end d-flex">
                                <span class="menu_item">section 3</span>
                            </div>
                            <div class="col-12 justify-content-end d-flex">
                                <span class="menu_item">section 4</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</body>
</html>

原文

I'm trying to get my logo stick to the top of the page but I can't manage to do that.
I've tried with:

#logo {
position: sticky; 
top:0
}

I also check if there's an overflow property but I've found nothing, I'm also using bootstrap framework version 5.

This is the part where I've put logo:

<div class="container" id="header">
    <div class="row">
        <div class="col-4 col-md-3 align-items-start d-flex">
            <img src="../media/logos/mb-logo.png" id="logo" class="img-fluid" alt="logo">
        </div>
        <div class="col-7 col-md-8 align-items-end justify-content-end d-flex" id="menu_mobile">
            <div class="row">
                <div class="col-12 justify-content-end d-flex">
                    <span class="menu_item">about me</span>
                </div>
                <div class="col-12 justify-content-end d-flex">
                    <span class="menu_item">competencies</span>
                </div>
                <div class="col-12 justify-content-end d-flex">
                    <span class="menu_item">portfolio</span>
                </div>
                <div class="col-12 justify-content-end d-flex">
                    <span class="menu_item">contact</span>
                </div>
            </div>
        </div>
        <div class="col justify-content-end align-items-center d-flex" id="menu_desk">
            <span class="menu_item_desk">about me</span>
            <span class="menu_item_desk">competencies</span>
            <span class="menu_item_desk">portfolio</span>
            <span class="menu_item_desk">contact</span>

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

Can someone help me?

edit: after trying the solution posted by @Fork:

<div class="container" id="header">
    <div class="row">
        <div class="col-4 col-md-3 align-items-start d-flex " >
            <img src="../media/logos/mb-logo.png" id="logo" class="img-fluid position-fixed top-0" alt="logo">
        </div>

The logo stay in position while I scroll down but other element changed of disposition. I managed to fix them adding some paddings and margin

edit 2: Here's the snippet and thanks to Fork now it works fine, another thing I would like to accomplish is that when the page is scrolled, the image goes up above the page for a tiny bit. I found this fiddle but is not exactly what i mean https://jsfiddle.net/z2r40y8c/. The image needs to go up and block at a specified amount of pixels.

html {
    scroll-behavior: smooth;
  }
body {
    width: 100%;
    height: 2000px
}

a{
    text-decoration: none;
}

.container {
    max-width: 100%;
    padding: 0%;
    margin: 0%;
}

body{
    background-color: #161616;
}
#logo {
 margin-left: 25px !important;
 position: fixed;
 top:0
}
.menu_mobile{
    padding-top: 5%;
}

.menu_item {
    font-family: 'sublimaextrabold';
    font-size: 18px;
    color: rgba(112,112,112,1);
    padding-bottom: 5%;
    cursor: pointer;
}
@media only screen and (min-width: 810px) {

#menu_mobile {
    display: none !important;
}

}
@media only screen and (max-width: 810px) {

    #menu_desk {
        display: none !important;
    }
    
    }
.menu_item_desk {
    font-family: 'sublimaextrabold';
    color: rgba(112,112,112,1);
    padding-left: 5%;
    font-size: 30px;
    cursor: pointer;
    padding-top: 5%;
}
@media only screen and (max-width: 1197px) {
    .menu_item_desk {
        font-size: 24px;
    }
}
@media only screen and (max-width: 993px) {
    .menu_item_desk {
        font-size: 20px;
    }
}
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MB</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="../html/style.css">
</head>

<body ondragstart="return false;" ondrop="return false;">

<div class="container" id="header">
        <div class="row">
            <div class="col-sm-12">
                <div class="container">
                    <div class="col-sm-3 align-items-start d-flex">
                        <img src="https://www.startpage.com/av/proxy-image?piurl=https%3A%2F%2Fdictionary.cambridge.org%2Ffr%2Fimages%2Fthumb%2Foblong_noun_002_25303.jpg%3Fversion%3D5.0.245&sp=1657096049T030f5c6f84a41f399845576d2d63d9849144e614f9e0077172506ae40946828e" id="logo" class="img-fluid position-fixed top-0" alt="logo">
                    </div>
                    <div class="col-sm-11 d-flex justify-content-end align-items-center " id="menu_desk">
                        <span class="menu_item_desk">section 1</span>
                        <span class="menu_item_desk">section 2</span>
                        <span class="menu_item_desk">section 3</span>
                        <span class="menu_item_desk">section 4</span>
                    </div>
                    <div class="col-11 align-items-end pt-3 justify-content-end d-flex" id="menu_mobile">
                        <div class="row">
                            <div class="col-12 justify-content-end d-flex">
                                <span class="menu_item">section 1</span>
                            </div>
                            <div class="col-12 justify-content-end d-flex">
                                <span class="menu_item">section 2</span>
                            </div>
                            <div class="col-12 justify-content-end d-flex">
                                <span class="menu_item">section 3</span>
                            </div>
                            <div class="col-12 justify-content-end d-flex">
                                <span class="menu_item">section 4</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</body>
</html>

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

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

发布评论

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

评论（2）

苍景流年 2025-02-20 02:23:36

不确定为什么您只需要位置：粘性;仅在徽标上而不是整个导航栏上，但是如果您想走那条路线，我建议使用position：filest; fileve; <<<< /代码>而是。此外，将其应用于围绕图像的div。喜欢：

<div class="col-4 col-md-3 align-items-start d-flex position-fixed top-0">
 <img src="../media/logos/mb-logo.png" id="logo" class="img-fluid" alt="logo">
</div>

希望这会有所帮助:)

Not sure why you just want the position: sticky; just on the logo rather than the whole navigation bar, but if you want to go that route, I would suggest using position: fixed; instead. Additionally, apply it to the div that's surrounding your image. Like so:

<div class="col-4 col-md-3 align-items-start d-flex position-fixed top-0">
 <img src="../media/logos/mb-logo.png" id="logo" class="img-fluid" alt="logo">
</div>

Hope this helps :)

回复 原文
叫嚣ゝ 2025-02-20 02:23:36

据我所知，问题是，对于某些构造，例如引导旋转木马，如果您想在全屏幕上显示它，则引导程序要求将HTML的高度设置为100％。
对于位置：粘性必须没有高度设置。
您可以尝试使用JS进行NAV粘性：

    const nav = document.querySelector('#nav');
let navTop = nav.offsetTop;

function fixedNav() {
  if (window.scrollY >= navTop) {    
    nav.classList.add('fixed');
  } else {
    nav.classList.remove('fixed');    
  }
}

window.addEventListener('scroll', fixedNav);

和激活的Navbar的CSS：

#nav.fixed {
  position: fixed;
  box-shadow: 5px 5px 19px 0px rgba(0, 0, 0, 0.5);
}
#nav.fixed ul li img {
  height: 36px;
}
#nav.fixed ul li a {
  font-size: 14px;
}

As far as I know the problem is, that for some constructions, like a bootstrap carousel, if you want to display it on a fullscreen, bootstrap requires the height of html to be set to 100%.
For position: sticky it is required to have no height set.
You could try making the nav sticky with JS:

    const nav = document.querySelector('#nav');
let navTop = nav.offsetTop;

function fixedNav() {
  if (window.scrollY >= navTop) {    
    nav.classList.add('fixed');
  } else {
    nav.classList.remove('fixed');    
  }
}

window.addEventListener('scroll', fixedNav);

and the CSS for the activated navbar:

#nav.fixed {
  position: fixed;
  box-shadow: 5px 5px 19px 0px rgba(0, 0, 0, 0.5);
}
#nav.fixed ul li img {
  height: 36px;
}
#nav.fixed ul li a {
  font-size: 14px;
}
回复 原文
~没有更多了~

关于作者

筱武穆

暂无简介

文章
评论
925 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 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 和您的相关数据。
    原文