我在移动菜单上遇到了一些麻烦, - 我无法滚动.要通过滚动来清除我的内容,我会看到整个菜单.现在滚动时,它会在一定量的px(标题的高度)后停止.请尽量减少窗口,如果您想自己看一下,它看起来像移动风景.

如图所示,您无法看到整个菜单.

问题如下:

header {
        position: fixed;
}

它需要修复,但我必须能够滚动.有什么建议？

我试图删除部分代码以使其更容易理解.

HTML

<header class="nav-down">
    <nav class="navbar navbar navbar-fixed-top site-navigation" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#Aarseth-Navbar">
                <section class="si-icons si-icons-default">
                    <span class="si-icon si-icon-hamburger-cross" data-icon-name="hamburgerCross"></span>
                </section>
            </button>
            <div id="navbar-brand-cont">
                <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
                    <img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.jpg">
                </a>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="Aarseth-Navbar">
            <ul class="nav navbar-nav">
                <?php wp_nav_menu( array( 'menu' => 'Hovedmeny', 'menu_class' => 'nav-menu' )); ?>
            </ul>
        </div>
    </nav>
</header>

CSS

header …

问题已更新.请参阅下面的最新版本

在使用自定义帖子时,我很难看到所有帖子类型.这是基于同位素,用户应该点击链接查看该类别中的帖子.

将显示由Wordpress标准帖创建的所有帖子,但不会使用"类型"(自定义帖子)创建.

<ul id="filters" class="whitetext whitelink myeluft">
    <li><a href="#" data-filter="*" class="selected">Alle</a></li>
    <li><a href='#' data-filter='.foto'>Foto</a></li>
    <li><a href='#' data-filter='.video'>Video</a></li>
    <li><a href='#' data-filter='.web'>Web</a></li>
</ul>

<?php $the_query = new WP_Query( 'posts_per_page=50' ); //Check the WP_Query docs to see how you can limit which posts to display ?>
<?php if ( $the_query->have_posts() ) : ?>
    <div id="isotope-list">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); 


        // Query posts - post_types
        $anypost = get_posts( array(
             'post_type'      => 'any' // every post type, but not attachments
        ) …

它现在如何工作:

• 它显示最新的6个项目为默认值
• 按下特定列表时,它会显示该类别中最新的6个项目的最新帖子.例如:它显示了Foto中最新的4个,因为6个中的4个是Foto类别.这意味着如果6个最新项目属于Foto类别,则其他类别中的任何帖子都不会显示.如果您不明白,请参阅下面的屏幕节目.

它应该如何工作:

• 默认显示最新的6个项目(这有效)
• 按一个类别时,它应显示该类别中的最新6个帖子

见这里的页面

注意:如果您在Windows 10中使用Chrome,则悬停效果因某些原因停止工作.该错误已报告给Chrome和Windows

<ul id="filters" class="whitetext whitelink myeluft">
    <li class="smoothtrans"><a href="#" data-filter="*" class="selected smoothtrans">Alle</a></li>
    <li class="smoothtrans"><a href='#' data-filter='.foto' class="smoothtrans">Foto</a></li>
    <li class="smoothtrans"><a href='#' data-filter='.video' class="smoothtrans">Video</a></li>
    <li class="smoothtrans"><a href='#' data-filter='.web' class="smoothtrans">Web</a></li>
</ul>

PHP

<?php

$args = array(
    'post_type' => (array( 'foto', 'video', 'web' )),
    'posts_per_page' => '6',
    'post_taxonomy' => 'any',
);

$the_query = new WP_Query($args); 


// Loop post_type
?>

<?php if ( $the_query->have_posts() ) : ?>
    <div id="isotope-list">
        <?php …

遇到AJAX和Masonry网格问题.砌体网格很简单,不适合在适当的时刻启动.

在滚动或使用参数搜索转到特定类别之前,它可以很好地工作.

样本网站可以在这里找到.

石工

Masonry是一个JavaScript网格布局库.通常与Bootstrap或其他未正确对齐项目的网格系统一起使用.例:

只有bootstrap:

Bootstrap和Masonry:

滚动时

下一列将添加到旧列之上.提供与卸载图像几乎相同的输出,这使得图像重叠.这通常通过使用imagesLoaded我已经包含在提供的代码中来解决.

使用参数搜索时

在AJAX之后,Masonry没有被解雇.这意味着它根本不起作用.所以列没有砌体加载.

请参阅示例站点.

滚动和参数搜索都由Toolset提供.它们有一个很好的系统,可以在特定时间轻松加载JS:

• 完成AJAX Pagination with Toolset之后.
• 触发参数搜索时.
• 收集参数搜索数据后.
• 参数搜索表单更新后.
• 参数化搜索结果更新后.

因此,在分页后以及参数搜索之前/期间/之后.由于问题是在滚动之后,并且在参数搜索的结果更新之后,我想在此时启动砌体网格.

最简单的例子是滚动完成或分页,因为它也被调用.

我试过了什么

我用过,reloadItems因为我猜对了.如果我错了,请纠正我.资源.

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
  $container.masonry('reloadItems')
});

在我的理论中,它会在滚动时重新加载所有项目,因此它们将被正确排列.但它什么都没改变.

我也尝试过以下方法:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
  var $container = $('.masonry-container');        
        $container.imagesLoaded(function() {               
            $container.masonry('reload');
            $container.masonry({
                isInitLayout : true,
                itemSelector: '.col-md-3' …

Masonry并且imagesLoaded应该加载并正常工作。已经创建了一个类似的站点，并且它可以正常工作。我不知道我的问题出在哪里，所以我希望你能看到问题。应该少了点什么。

在 Chrome Inspect 中，我收到以下错误：

Uncaught TypeError: $(...).imagesLoaded is not a function

据我了解，这意味着.imagesLoaded并且Masonry应该正确加载？否则我会收到错误$container.imagesLoaded is not a function？

我试过的

• 检查 jquery-2.1.4.min.js 是否正确加载
• 更改加载 jquery 的顺序
• 在线搜索
• 在 jquery 中搜索错误

标题

<script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/jquery-2.1.4.min.js"></script>
<script src="http://www.vekvemedia.no/wp-content/themes/vekvemedia/js/collection.js"></script>
<?php wp_head(); ?>

HTML

<div class="container">
    <div id="masonry-container" class="row nomargin">
         <div class="col-md-9">
              <div class="item col-lg-4 col-md-4 col-sm-4">
                   <!--- Content --->
              </div>
              <div class="item col-lg-4 col-md-4 col-sm-4">
                   <!--- Content --->
              </div>
              <div class="item col-lg-4 col-md-4 col-sm-4">
                   <!--- Content ---> …

我试图在JS中获取stylesheet_directory,但无法让它工作.

这是我尝试过的:

url : '<?php bloginfo('stylesheet_directory'); ?>/img/hamburger.svg'

和:

var stylesheetDir = "<?php bloginfo('stylesheet_directory') ?>"; 
url : '$stylesheetDir/img/hamburger.svg',

我想一些角色或其他什么问题？你能帮帮我吗？

svgicons-配置-JS

var stylesheetDir = "<?php bloginfo('stylesheet_directory') ?>"; 
url == $stylesheetDir;
decodeURI(url);


var svgIconConfig = {
    hamburgerCross : {
        url : stylesheetDir + '/img/hamburger.svg',
        animation : [
            { 
                el : 'path:nth-child(1)', 
                animProperties : { 
                    from : { val : '{"path" : "m 5.0916789,20.818994 53.8166421,0"}' }, 
                    to : { val : '{"path" : "M 12.972944,50.936147 51.027056,12.882035"}' }
                } 
            },
            { 
                el : 'path:nth-child(2)', 
                animProperties …

尝试向使用 CSS 制作的显示/隐藏添加动画。但不确定是否可能，也许我应该用 JS 来代替？

该段落在悬停 div 时显示，但这没有像我想要的那样流畅的动画。是主要寻找它下降或什么的。

但是，基本的工作。如果你看一看并决定是否应该用 JS 制作它会很高兴。以及如何装箱。

HTML

<div class="hover-to-show-link">
    <a href="#">
        <img src="#">
        <h2>Logo</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <img src="#">
        <h2>Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <img src="#">
        <h2 >Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>
<div class="hover-to-show-link">
    <a href="#">
        <img src="#">
        <h2>Profilering</h2>
        <p class="hover-to-show">text</p>
    </a>
</div>

CSS

.hover-to-show { 
    display: none;
    transition: all .2s ease-in-out;
}

.hover-to-show-link:hover .hover-to-show {
    display:block;
    transition: all .2s ease-in-out;
}

我在选择第二个h1时遇到了一些麻烦.如果我尝试选择第一个,它会很好,但第二个不起作用.你能看看吗？

.sidemal h1:nth-child(2) {
    margin-top: 0px;    
}

我试过使用!重要,但没有用.

有任何想法吗？

链接到网站:http://tinyurl.com/pk9me6e

<section>
    <div class="col-md-12">
        <h1 class="page_title">Header 1</h1>
    </div>
</section>

<div class="col-md-12">
    ...
    <h1>Header 2</h1>
    ...
</div>