店面粘性标题答案

【问题标题】：Storefront sticky header店面粘性标题
【发布时间】：2018-05-25 14:14:52
【问题描述】：

我正在尝试为我的 WordPress 网站 (www.carryoneverything.com) 创建一个粘性标题。我安装了最新的 Storefront 主题，但我似乎无法在同一行上获取我的徽标、导航、购物车和搜索。我认为是因为它们都在单独的 div 中？

我希望我的标题在完成后看起来像 https://www.hollisterco.com/shop/us。

此外，当我这样做时，管理栏会覆盖粘性标题，而粘性标题会覆盖正文：

#masthead {
    position: fixed;
    top: 0;
    width: 100%;
}

我可以用 CSS 解决这个问题还是必须使用 javascript？

【问题讨论】：

标签： html css wordpress storefront

【解决方案1】：

你绝对可以用 CSS 解决这个问题。包含您希望排列的项目的父容器可以添加弹性属性，以便为您排列。在此处阅读有关 flex 的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

当通过给 div 一个固定的位置来掩盖事情时，很可能是 z-index 问题。这使您可以对 div 进行分层，将某些 div 保留在顶部，而将其他 div 保留在底部。

示例： z-index:1 将被 z-index:2 覆盖。在此处阅读有关 z-index 的更多信息：https://www.w3schools.com/cssref/pr_pos_z-index.asp

.parent{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.child{
  width:20%;
  background-color:black;
  color:white;
  text-align:center;
}

<div class="parent">
  <div class="child">
    1
  </div><!-- child -->
    <div class="child">
    2
  </div><!-- child -->
    <div class="child">
    3
  </div><!-- child -->
</div><!-- parent -->

【讨论】：

【解决方案2】：

这是一个 wordpress 问题。我们不能只通过给你一个代码来解决它。我们必须有权访问该站点。主题还可能为您提供一些编辑（主题选项）。顺便说一句，这实际上是一个小问题。

【讨论】：

【解决方案3】：

将 css 添加到 style.css

#masthead {
    position: fixed;
    top: 0;
    width: 100%;
}
@media screen and (min-width: 768px) {
/*resizing the logo image */
#masthead.sticky .custom-logo-link img {
    width: auto;
    height: 40px;
}

/*positioning the main-navigation */
#masthead.sticky .main-navigation {
    text-align: right;
    position: fixed;
    top: 0;
    right: 300px;
    padding: 0;
    width: auto;
}


/*positioning the logo*/
#masthead.sticky .custom-logo-link {
    position: fixed;
    top: 0;
    margin: 0;
    padding: 0;
}
/*adjusting default margins and paddings*/
#masthead.sticky .site-header-cart .cart-contents{
    padding:1em 0;
}
#masthead.sticky .main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
    padding: 1em 1em;
}
#masthead.sticky .site-branding{
    margin-bottom: 1em;
}

/*positioning the cart-menu */
#masthead.sticky .site-header-cart {
    width: 14% !important;
    position: fixed !important;
    top: 0;
    right: 12%;
    padding: 0;
}

/*applying the position fixed on the masterhead */
#masthead.sticky{
    position: fixed;
    top: 0;
    width: 100%;
}
/*removing the site search*/
#masthead.sticky .site-search{
    display:none;
}
}

在主题的 js 文件夹中创建一个文件“stickyheader.js”。并添加以下代码

(function($){
$(document).ready(function () {
    $(window).scroll(function() {
          if ($(this).scrollTop() > 100){  
            jQuery('#masthead').addClass('sticky');
          }
          else{
            jQuery('#masthead').removeClass("sticky");
          }
            });
}); 
})(jQuery);

将此代码添加到functions.php，以便包含js文件

$path = get_stylesheet_directory_uri() .'/js/';
if (!is_admin()) wp_enqueue_script('stickyheader', $path.'stickyheader.js',
array('jquery'));

【讨论】：