从24个主题的顶部导航中删除粘滞行为？

时间：2014-07-16 作者：cmsdeployed

在wordpress主题214中，我想知道如何使用100%宽度的标题背景图像消除顶部导航的粘性行为，如this site?

我希望有一个全宽和最大高度的顶部图像，导航就放在下面，但向下滚动时导航会停留在浏览器窗口的顶部。

我最终使用了以下内容。js与Twentyree child主题

//$(document).ready(function() {
jQuery().ready(function($) {
var stickyNavTop = $(\'.navbar\').offset().top;

var stickyNav = function(){
var scrollTop = $(window).scrollTop();

if (scrollTop > stickyNavTop) { 
$(\'.navbar\').addClass(\'sticky\');
} else {
$(\'.navbar\').removeClass(\'sticky\'); 
}
};

stickyNav();

$(window).scroll(function() {
stickyNav();
});
});

并添加

 .sticky { position: fixed; z-index: 100; ... }

多亏了这里的帖子。

我本可以把同样的方法应用到214岁，但这很棘手，我没有时间浪费。

4 个回复

最合适的回答,由SO网友:Pieter Goosen 整理而成

在我回答这个问题之前，我相信您已经创建了child theme. Reason: 你应该never 对您不是作者的主题/插件进行任何更改。这包括核心文件

排序后，导航菜单的行为完全由js控制，

  77          /*
  78           * Fixed header for large screen.
  79           * If the header becomes more than 48px tall, unfix the header.
  80           *
  81           * The callback on the scroll event is only added if there is a header
  82           * image and we are not on mobile.
  83           */
  84          if ( _window.width() > 781 ) {
  85              var mastheadHeight = $( \'#masthead\' ).height(),
  86                  toolbarOffset, mastheadOffset;
  87  
  88              if ( mastheadHeight > 48 ) {
  89                  body.removeClass( \'masthead-fixed\' );
  90              }
  91  
  92              if ( body.is( \'.header-image\' ) ) {
  93                  toolbarOffset  = body.is( \'.admin-bar\' ) ? $( \'#wpadminbar\' ).height() : 0;
  94                  mastheadOffset = $( \'#masthead\' ).offset().top - toolbarOffset;
  95  
  96                  _window.on( \'scroll.twentyfourteen\', function() {
  97                      if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
  98                          body.addClass( \'masthead-fixed\' );
  99                      } else {
 100                          body.removeClass( \'masthead-fixed\' );
 101                      }
 102                  } );
 103              }
 104          }

可以在函数中找到。js文件夹中的js

要删除此功能，（全部在子主题中），您需要退出队列（使用wp_dequeue_script()) 原始功能。js，复制函数。js到您的子主题，删除所提到的行并排队（使用wp_enqueue_script()) 修改后的js。这将在连接到wp_enqueue_scripts 钩

在规范和实践中

在子主题的根文件夹中创建一个名为js的文件。

复制功能。js并将其粘贴到子主题的js文件夹中

打开功能。js并删除我上面提到的行

保护功能。js公司

现在，打开孩子主题的功能。php，并在其中添加以下代码。这将使父脚本出列，并使新修改的脚本入列

function enqueue_child_functions_js() {

    wp_dequeue_script( \'twentyfourteen-script\' ); //dequeue the parent script
    wp_enqueue_script( my-child-script\', get_stylesheet_directory_uri() . \'/js/functions.js\', array( \'jquery\' ), \'20140717\', true ); //enqueue new modified script

}

add_action( \'wp_enqueue_scripts\', \'enqueue_child_functions_js\', 999 );

SO网友:Sepster

在2014年的主题中masthead-fixed 类添加到<body> 要素

因此，以下CSS（第3362行）启动：

@media screen and (min-width: 783px)
.masthead-fixed .site-header {
  position: fixed;
  top: 0;
}

您可以从子主题应用以下CSS来覆盖此主题：

.masthead-fixed .site-header {
  position: relative;
}

SO网友:Nicholas Petersen

根据塞普斯特的回答，我正在处理的2014年主题需要进一步补充（以下是对我有效的完整解决方案）：

.masthead-fixed .site-header {
  position: relative;
}

@media screen and (min-width: 783px) {
    .admin-bar.masthead-fixed .site-header {
        top:inherit;
    }
}

SO网友:Swagatam Majumdar

根据我的说法position: unset 是最好、最干净的选择，

说明：我的网站上有一个Genesis主题。我喜欢并上传了它的新版本，它看起来又白又干净，但我不喜欢主题的粘性或固定标题栏功能，因为它会略微增加页面的加载时间。

我决定关掉粘性行为。我右键单击页面，研究标题栏的类名，选中CSS选项，发现它有以下详细信息：

.site-header {
position: fixed;

}

我复制了整个部分，并将其放入我的主题自定义框中，进行了以下更改：

.site-header {
position: unset;

}

问题立即得到解决，我可以达到所需的结果。

我选择了“unset”，因为它只是将情况还原为主题的标准或默认版本，并删除与代码相关的任何修改。

您可以看到调试屏幕截图here

结束

有条件地为插件中的do_action()调用加载javascrip和css

我正在开发一个插件并使用do_action() 而不是在站点上显示插件内容的短代码。该插件将只由我使用，但我制作该插件是为了将网站的组件与主题本身分离。如果从插件在主题中调用了特定的do\\u操作，我将如何在页面上有条件地显示javascript和css？我发现了大量的短代码，但我想避免使用短代码，因为我将直接在主题中调用操作。我试过这样的add_action(\'wp_footer\', \'print_my_script\'); function print_my_script() {

//$(document).ready(function() { jQuery().ready(function($) { var stickyNavTop = $(\'.navbar\').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $(\'.navbar\').addClass(\'sticky\'); } else { $(\'.navbar\').removeClass(\'sticky\'); } }; stickyNav(); $(window).scroll(function() { stickyNav(); }); });

77 /* 78 * Fixed header for large screen. 79 * If the header becomes more than 48px tall, unfix the header. 80 * 81 * The callback on the scroll event is only added if there is a header 82 * image and we are not on mobile. 83 */ 84 if ( _window.width() > 781 ) { 85 var mastheadHeight = $( \'#masthead\' ).height(), 86 toolbarOffset, mastheadOffset; 87 88 if ( mastheadHeight > 48 ) { 89 body.removeClass( \'masthead-fixed\' ); 90 } 91 92 if ( body.is( \'.header-image\' ) ) { 93 toolbarOffset = body.is( \'.admin-bar\' ) ? $( \'#wpadminbar\' ).height() : 0; 94 mastheadOffset = $( \'#masthead\' ).offset().top - toolbarOffset; 95 96 _window.on( \'scroll.twentyfourteen\', function() { 97 if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) { 98 body.addClass( \'masthead-fixed\' ); 99 } else { 100 body.removeClass( \'masthead-fixed\' ); 101 } 102 } ); 103 } 104 }

function enqueue_child_functions_js() { wp_dequeue_script( \'twentyfourteen-script\' ); //dequeue the parent script wp_enqueue_script( my-child-script\', get_stylesheet_directory_uri() . \'/js/functions.js\', array( \'jquery\' ), \'20140717\', true ); //enqueue new modified script } add_action( \'wp_enqueue_scripts\', \'enqueue_child_functions_js\', 999 );

在带有PHP的子主题中包含style.css

在里面https://codex.wordpress.org/Child_Themes 这是包含样式的最佳实践。css在子主题中，必须将下面的代码放入函数中。php的子主题，但将“父样式”替换为可以在函数中找到的父主题的参数。父主题的php。我在我的主题文件中找不到它，那里也没有多少代码。使用@import包含父主题样式表的方法不适用于我，放入文件的css不会在任何浏览器的站点上显示自己。function my_theme_enqueue_styles() { $parent_s

小码农CODE

从24个主题的顶部导航中删除粘滞行为？

相关推荐

有条件地为插件中的do_action()调用加载javascrip和css

小码农CODE

从24个主题的顶部导航中删除粘滞行为？

相关推荐

在带有PHP的子主题中包含style.css