个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
当此响应式 HTML5 模板调整为手机尺寸时，使标题具有粘性。
我似乎无法找到正确的元素来添加 CSS position 属性。无论我将“粘性”类添加到哪个 DIV，它都不会固定在屏幕顶部。
桌面模式运行良好
手机尺寸不合格
我试过附加一个类，像这样......
.makeSticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
...到每个元素，甚至远离标题。我只是找不到合适的，无法正常工作。
这是在服务器上运行的页面:http://stpete.epizy.com/en/index.html
<header class="header-area header-3">
<div class="desktop-nav d-none d-lg-block">
<div class="header-nav">
<div class="container-fluid custom-container">
<div class="header-nav-wrapper d-flex justify-content-between">
<div class="header-static-nav">
<p>Get FREE Shipping with <span class="text">$35!</span> Code: FREESHIPPING</p>
</div>
<div class="header-menu-nav">
<ul class="menu-nav">
<li>
<div class="dropdown">
<button type="button" id="setting" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Setting <i class="icon ion-chevron-down"></i></button>
<ul class="dropdown-menu" aria-labelledby="setting">
<li><a href="checkout.html">Checkout</a></li>
<li><a href="login.html">Sign in</a></li>
</ul>
</div>
</li>
<li>
<div class="dropdown">
<button type="button" id="langue" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="images/1.jpg" alt=""> English <i class="icon ion-chevron-down"></i></button>
<ul class="dropdown-menu" aria-labelledby="langue">
<li><a href="http://123globalelecronicsllc.com/en"><img src="images/1.jpg" alt=""> English</a></li>
<li><a href="http://123globalelecronicsllc.com/sp"><img src="images/2.jpg" alt=""> Spanish</a></li>
</ul>
</div>
</li>
</ul>
</div> <!-- header menu nav -->
</div> <!-- header nav wrapper -->
</div> <!-- container -->
</div> <!-- header nav -->
<div class="header-middle">
<div class="container-fluid custom-container">
<div class="row">
<div class="col-lg-3">
<div class="header-logo-contact d-flex ">
<div class="desktop-logo">
<a href="index.html">
<img src="images/logo-white.png" alt="Global Eletronics, LLC">
</a>
</div> <!-- desktop logo -->
</div>
</div>
<div class="col-lg-9">
<div class="header-search-cart d-flex align-items-center">
<div class="header-contact d-flex align-items-center">
<i class="icon ion-ios-telephone-outline"></i>
<div class="phone media-body">
<p>24/7 Support</p>
<a href="tel:+7276230753">+727-623-0753</a>
</div>
</div>
<div class="header-search media-body">
<form action="#">
<div class="search-category">
<select>
<option value="">All categories</option>
<option value="audio">Audio Parts</option>
<option value="accessories">- - Accessories</option>
<option value="buzzers">- - Buzzers</option>
<option value="batteries">Battery Products</option>
<option value="batteries">- - Primary Batteries</option>
</select>
</div>
<input id="search-box" type="text" placeholder="Part #">
<button><i class="icon ion-android-search"></i></button>
</form>
</div>
<div class="header-cart">
<div class="cart-btn">
<a href="cart.html">
<i class="icon ion-calculator"></i>
<span class="text">RFQ Parts :</span>
<span class="count">0</span>
</a>
</div>
<!--
<div class="mini-cart">
<ul class="cart-items">
<li>
<div class="single-cart-item d-flex">
<div class="cart-item-thumb">
<a href="cart.html"><img src="images/cart-1.jpg" alt="product"></a>
<span class="product-quantity">1x</span>
</div>
</div>
</li>
</ul>
<div class="price_content">
<div class="cart-subtotals">
</div>
<div class="cart-total price_inline">
<span class="label"># Items</span>
<span class="value">12</span>
</div>
</div>
<div class="checkout text-center">
<a href="checkout.html" class="main-btn">Send RFQ</a>
</div>
</div>
-->
</div>
</div> <!-- header search cart -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</div> <!-- header middle -->
<div class="header-menu">
<div class="container-fluid custom-container">
<div class="row">
<div class="col-lg-3">
<div class="header-menu-vertical">
<h4 class="menu-title">
<span>Parts by</span>
Category
</h4>
<ul class="menu-content menu-expand">
<li class="menu-item">
<a href="products.html?cat=semiconductor">Semiconductor </a>
</li>
<li class="menu-item">
<a href="products.html?cat=semiconductor">Passives </a>
</li>
<li class="menu-item"><a href="products.html?cat=semiconductor">ElectroMechanical</a></li>
<li class="menu-item"><a href="products.html?cat=semiconductor">Power & Circuit</a></li>
<li class="menu-item"><a href="products.html?cat=semiconductor">Automation</a></li>
<li class="menu-item"><a href="products.html?cat=semiconductor">Connectors</a></li>
<li class="menu-item"><a href="products.html?cat=semiconductor">Cables & Wires</a></li>
<li class="menu-item"><a href="products.html?cat=semiconductor">Test</a></li>
</ul> <!-- menu content -->
</div> <!-- header menu vertical -->
</div>
<div class="col-lg-9 position-static">
<div class="header-horizontal-menu">
<ul class="menu-content">
<li class="active"><a href="index.html">Home </a>
</li> <li class="position-static"><a href="products.html?cat=all">Products <i class="fal fa-chevron-down"></i></a>
<ul class="mega-sub-menu d-flex flex-wrap">
<li>
<a class="menu-title" href="#">Shop Grid</a>
<ul class="submenu-item">
<li><a href="shop-3-column.html">Shop Grid Column 3</a></li>
<li><a href="shop-4-column.html">Shop Grid Column 4</a></li>
<li><a href="shop-left-sidebar.html">Shop Grid left sidebar</a></li>
<li><a href="shop-right-sidebar.html">Shop Grid Right sidebar</a></li>
</ul>
</li>
<li>
<a class="menu-title" href="#">Shop List</a>
<ul class="submenu-item">
<li><a href="shop-list.html">Shop List</a></li>
<li><a href="shop-list-left-sidebar.html">Shop List Left sidebar</a></li>
<li><a href="shop-list-right-sidebar.html">Shop List Right sidebar</a></li>
</ul>
</li>
<li>
<a class="menu-title" href="#">Shop Single</a>
<ul class="submenu-item">
<li><a href="single-product.html">Shop Single</a></li>
<li><a href="single-product-variable.html">Shop Variable</a></li>
<li><a href="single-product-affiliate.html">Shop Affiliate</a></li>
<li><a href="single-product-group.html">Shop Group</a></li>
<li><a href="single-product-tabstyle2.html">Shop Tabs 2</a></li>
<li><a href="single-product-tabstyle3.html">Shop Tabs 3</a></li>
</ul>
</li>
<li>
<a class="menu-title" href="#">Shop Single</a>
<ul class="submenu-item">
<li><a href="single-product-slider.html">Shop Slider</a></li>
<li><a href="single-product-gallery-left.html">Shop Gallery Left sidebar</a></li>
<li><a href="single-product-gallery-right.html">Shop Gallery Right sidebar</a></li>
<li><a href="single-product-sticky-left.html">Shop Sticky Left sidebar</a></li>
<li><a href="single-product-sticky-right.html">Shop Sticky Right sidebar</a></li>
</ul>
</li>
<li class="custom-banner">
<a href="shop-4-column.html"><img src="images/custom_banner.jpg" alt="" class="img-responsive"></a>
</li>
</ul>
</li>
<li><a href="#">Services <i class="fal fa-chevron-down"></i></a>
<ul class="sub-menu">
<li><a href="about.html">About</a></li>
</ul>
</li>
<li><a href="#">Resources <i class="fal fa-chevron-down"></i></a>
<ul class="sub-menu">
<li><a href="#">BOM Upload Tool</a></li>
<li><a href="#">Global Learning Lab</a></li>
<li><a href="#">Product Advisor</a></li>
<li><a href="#">Articles</a></li>
</ul>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div> <!-- header horizontal menu -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</div> <!-- header menu -->
</div> <!-- desktop nav -->
<div class="mobile-nav d-lg-none">
<div class="container-fluid">
<div class="mobile-nav-top">
<div class="row align-items-center">
<div class="col-sm-4 col-3">
<div class="mobile-toggle">
<a class="mobile-menu-open" href="javascript:;"><i class="fal fa-bars"></i></a>
</div>
</div>
<div class="col-sm-4 col-5">
<div class="mobile-logo text-center">
<a href="index.html">
<img src="images/logo-white.png" alt="Logo">
</a>
</div> <!-- mobile logo -->
</div>
<div class="col-sm-4 col-4">
<div class="mobile-account-cart">
<ul class="account-cart text-right">
<li>
<div class="dropdown">
<button type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fal fa-user"></i></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a href="#">My account</a></li>
<li><a href="#">Checkout</a></li>
<li><a href="#">Sign in</a></li>
</ul>
</div>
</li>
<li class="header-cart">
<a href="#">
<i class="fal fa-envelope-open-dollar"></i>
<span>0</span>
</a>
<div class="mini-cart">
<ul class="cart-items">
<li>
<div class="single-cart-item d-flex">
<div class="cart-item-thumb">
<a href="single-product.html"><img src="images/cart-1.jpg" alt="product"></a>
<span class="product-quantity">1x</span>
</div>
<div class="cart-item-content media-body">
<h5 class="product-name"><a href="single-product.html">New Balance Fresh Foam LAZR</a></h5>
<span class="product-price">€18.90</span>
<span class="product-color"><strong>Color:</strong> White</span>
<a href="#" class="product-close"><i class="fal fa-times"></i></a>
</div>
</div>
</li>
<li>
<div class="single-cart-item d-flex">
<div class="cart-item-thumb">
<a href="single-product.html"><img src="images/cart-2.jpg" alt="product"></a>
<span class="product-quantity">3x</span>
</div>
<div class="cart-item-content media-body">
<h5 class="product-name"><a href="single-product.html">New Balance Fresh Foam LAZR</a></h5>
<span class="product-price">€18.90</span>
<span class="product-color"><strong>Color:</strong> White</span>
<a href="#" class="product-close"><i class="fal fa-times"></i></a>
</div>
</div>
</li>
</ul>
<div class="price_content">
<div class="cart-subtotals">
<div class="products price_inline">
<span class="label">Subtotal</span>
<span class="value">€30.80</span>
</div>
<div class="shipping price_inline">
<span class="label">Shipping</span>
<span class="value">€7.00</span>
</div>
<div class="tax price_inline">
<span class="label">Taxes</span>
<span class="value">€0.00</span>
</div>
</div>
<div class="cart-total price_inline">
<span class="label">Total</span>
<span class="value">€37.80</span>
</div>
</div> <!-- price content -->
<div class="checkout text-center">
<a href="checkout.html" class="main-btn">Checkout</a>
</div>
</div> <!-- mini cart -->
</li>
</ul>
</div>
</div>
</div> <!-- row -->
</div> <!-- mobile nav top -->
<div class="header-search">
<form action="#">
<div class="search-category">
<select>
<option value="0">All categories</option>
<option value="12">Laptop</option>
<option value="13">- - Hot Categories</option>
<option value="19">- - - - Dresses</option>
<option value="20">- - - - Jackets & Coats</option>
<option value="21">- - - - Sweaters</option>
<option value="22">- - - - Jeans</option>
<option value="23">- - - - Blouses & Shirts</option>
</select>
</div>
<input type="text" placeholder="Enter your search key ... ">
<button><i class="icon ion-android-search"></i></button>
</form>
</div>
</div> <!-- container -->
<div class="mobile-off-canvas-menu">
<div class="mobile-canvas-menu-top">
<ul class="menu-nav">
<li><a href="compare.html"><i class="fal fa-repeat"></i> Compare (0)</a></li>
<h6 class="custom-title">Women is Clothes & Fashion</h6>
<p>Shop women is clothing and accessories and get inspired by the latest fashion trends.</p>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="menu-block">
<h6 class="custom-title">Simple Style</h6>
<p>A new flattering style with all the comfort of our linen.</p>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="menu-block">
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Outerwear & Jackets</span></a>
<li><a href="shop-left-sidebar.html">Bags & Cases</a></li>
</ul> <!-- menu content -->
</div> <!-- mobile main menu -->
</div> <!-- mobile off canvas menu -->
<div class="overlay"></div>
</div> <!-- mobile nav -->
</header>
CSS
/*===== header 3 =====*/
.header-3 {
background-color: #1c2454; }
.header-3 .header-nav {
background-color: #000;
border-bottom: 0; }
.header-3 .header-nav .header-nav-wrapper .header-static-nav p {
color: #fff; }
.header-3 .header-nav .header-nav-wrapper .header-static-nav p .text {
color: #fff; }
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li + li {
margin-left: 30px; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li + li {
margin-left: 20px; } }
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li + li::before {
color: rgba(255, 255, 255, 0.4); }
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li a {
color: #fff; }
.header-3 .header-nav .header-nav-wrapper .header-menu-nav .menu-nav li .dropdown button {
color: #fff; }
.header-3 .header-contact i {
color: #fff; }
.header-3 .header-contact .phone p {
color: #fff; }
.header-3 .mobile-toggle a {
color: #fff; }
.header-3 .mobile-account-cart .account-cart li .dropdown button {
color: #fff; }
.header-3 .mobile-account-cart .account-cart li .dropdown button i {
font-size: 24px; }
.header-3 .mobile-account-cart .account-cart li a {
color: #fff; }
.header-3 .header-menu {
background-color: #1c2454;
border-top: 1px solid rgba(255, 255, 255, 0.4); }
.header-3 .header-menu.sticky {
border-top: 0; }
我继承了这个元素，HTML是从一些模板公司购买的。我没有编写 HTML - 所以任何帮助将不胜感激。
谢谢。
最佳答案
粘性位置需要空间，为了让它工作，.header-area 类需要粘性。仅将此规则添加到您的媒体查询中!我刚刚试过了，粘性位置是这样工作的:
.header-area {
position: sticky;
top: 0;
z-index: 9999;
}
关于html - 如何使标题在手机上保持粘性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63443350/
25
4
0
我有一个脚本，允许在向下移动时快速滚动，但我无法让它允许用户向上滚动。 var items = $(".item"); var animating = false; $(window).scroll(
所以我已经尝试解决这个问题几个小时了。有一个双层子菜单。如果子菜单的内容超出视口(viewport)，则当您滚动时子菜单项不会滚动。 click here to view the site 最佳答案
有什么方法可以控制移动浏览器中用户在可滚动元素中滚动的速度或粘性吗？ 我专注于 android 浏览器。 最佳答案 不，滚动速度由浏览器控制(通常直接由计算机/设备上的设置控制)。我认为您的代码不会影
我正在尝试使用 Haproxy 1.6.3 2015/12/25 和粘性 session 。我按照haproxy manual做的一切，但是，不幸的是，检查客户端浏览器我发现没有添加 cookie(平
清理并重建后，Eclipse Problems View 中出现错误标记，尽管一切都应该没问题。 如何消除这种不一致的错误？ 最佳答案 在这里，我回答自己接下来的步骤对我有用: 关闭 Eclipse
我用这个脚本制作了粘性 div - $(window).scroll(function() { var leedoffset = $('.leed_block').offset().top;
我希望我的 div 调用:如果我向下滚动，top 将粘在顶部，但现在它不会粘在顶部。 我在这段代码中使用 jQuery: $(window).scroll(function(){ if (
早上好，我正在为我的网站制作一个粘性 header ，我已经让它工作了，但它似乎卡入到位，我想要顺利!我该怎么做？ 我的网站:http://www.trevorpeters.co.uk/tpwebde
我有一个用于我正在处理的小测试站点的导航栏，我需要一些帮助。我正在使用 Bootstrap(您可能会说)但无法弄清楚如何在您向下滚动时让我的导航栏保持在屏幕顶部。我希望导航栏保持在超大屏幕下方，直到您
我的页脚设计为位于页面底部，即使其上方的 div 仅包含少量内容。它直到最近才起作用，我似乎以某种方式破坏了它。你能看看吗？ 提前致谢。 CSS: body { margin: 0;
我想在加载时让整个 UI 适合屏幕，但我的页脚没有固定在移动设备上的 View 底部。 在桌面网络浏览器上，它可以完美运行。当我在移动网络浏览器上查看此内容时，页脚位于页面下方，使页面可滚动。它不应该
我有一个问题。我正在创建一个由页眉、正文和页脚组成的单栏网站。在调整大小时，我可以让页脚粘在页面底部，但我的问题是这样的。如何让窗口在调整大小时“吃掉”页脚 div 而不是将其向上推？一个很好的例子是
我正在尝试实现一个粘性标题，在滚动超过 100-150 像素之前不会发生任何事情。向上滚动时它会显示出来，向下滚动时它会再次隐藏，当您滚动回页面顶部时也会返回到它的原始状态。 这正是我想要的外观/感觉
我正在使用一个名为“Thematosoup 的 Sticky header”的 WordPress 插件，我对此非常满意，但标题仅出现在一些像素之后，并不总是在顶部可见。有谁知道我如何修改代码以使其始
我目前正在创建一个网站，遇到了一个问题，每当我滚动我的粘性标题时，页面就会跳到下一个元素的底部，有人知道这是为什么吗？ 我已经尝试更改页面上基本上所有元素的填充，包括横幅、标题、文本本身，甚至 anc
我创建了一个简单的表格，顶部应该有粘性标题 (TR)。但这不起作用。我该如何修复此代码？ 谢谢 HELLO hello 5hello 5 hello 5hello 5 HELLO T
使用我当前的代码，当页面加载时，白色条形标题位于顶部。当你滚动时，它会消失，当你滚动到顶部时，白色标题又回来了。所以我取得了一些进步。我想要得到的是当滚动条在顶部时有一个透明的标题:(https://
我到处都看到这个问题的变体，但似乎没有一个能解决我的问题。我有一个高大的页面，由于内容原因已经有一个 Y 滚动条。部分内容是一个div style="position: relative;"，暂且称之
我创建了一个 header ，位置设置为粘性，顶部设置为 0。但是，如果我向下滚动页面，标题会在某个时候停止随页面滚动。 我认为这很容易解决，但我太笨了... 我试图删除其他元素，因为我认为它们与标题
我的代码有点卡在粘性 header 上。 如果达到 770px 点，标题将缩小。但是当我尝试在浏览器上进行测试时，这会给我带来一些问题。尝试在全尺寸浏览器中加载页面(>770)并将其缩小到(770)，
我是一名优秀的程序员,十分优秀！