Question

我无法获得导航的高度。

尝试＃1：

$("#process-link").click(function() {
    $('html, body, #project-container').animate({
        scrollTop: $("#process-work").offset().top
    }, 2000 + $("nav#primary").height());
});

尝试＃2：

var headerHeight = $("nav#primary").height();

    $.address.change(function(evt) {
    var target = "#" + evt["pathNames"][0]; //Get the target from the event data

    // If there's been some content requested go to it…else go to the top
    if(evt["pathNames"][0]) {
        var scrollToPosition = $(target).offset().top - headerHeight;
        $('html, body, #project-container').animate({ 'scrollTop': scrollToPosition }, 600);
    } else {
        $('html, body, #project-container').animate({ 'scrollTop': '0' }, 600);
    }

    return false;
});

尝试＃3

$(function() {

        $('#process-link').click(function() {
            $("html, body, #project-container").animate({
                scrollTop: $( "#process-work" ).offset().top + $('nav#primary').height() 
            }, 2000);

            return false;
        });
    });

HTML

<nav id="primary">Content</nav>    
<div id="arrow-nav" class="container-full clearfix">Content</div>

<div id="project">
        <div id="project-container">
            <div class="container">
                <section>
                    <p class="sm-title">Client:</p>
                    <h2 id="project-title"></h2>
                    <p id="project-description"></p>
                    <a id="process-link">View Process <i class="fa fa-long-arrow-right"></i></a>

                    <div class="row">
                        <div id="process-work">
                            <div class="col-6 fixme">
                                <h2 id="process-title">Process Work</h2>
                                <p id="process-description"></p>
                            </div>
                            <div class="col-6">
                                <div id="process-wireframes" class="owl-theme owl-carousel"></div>
                            </div>
                        </div><!-- end process-work-->
                    </div>

                </section>
            </div>
        </div><!-- end project container -->
    </div><!--closes project-->

我试图这样做，一旦点击#process-link，它就会滑到#process-work并计算nav＃primary和#arrow-nav和offsets的高度。

Answer 1

这个javascript目前实现了我想做的事情。我将所有div元素分组为一个名为#project-content的元素，并计算了它的高度加上nav。由于页面已修复，因此导致了问题。

<强> HTML

<div id="project-content">
   <p class="sm-title">Client:</p>
   <h2 id="project-title"></h2>
   <p id="project-description"></p>
   <div style="background:#919191" class="hr"></div>
   <a id="project-link" target="_blank">View Website <i class="fa fa-long-arrow-right"></i></a>
   <a id="process-link" data-type="slideTo" data-target="process-work">View Process <i class="fa fa-long-arrow-right"></i></a>
   <div id="project-tag"></div>
   <div id="project-images"></div>
</div><!--end project content-->

<强>的Javascript

$('#process-link').click(function() {
        $("html, body, #project-container").animate({
            scrollTop: $('nav#primary').height() + $("#arrow-nav").height() + $("#project-content").height() + 30
        }, 2000);

        return false;
    });

查看OP以查看文档中也存在的div以及我正在计算的内容。 #project-container有padding-top:60px;，我认为这也影响了偏移，这就是我添加30的原因。

在滚动动画到div期间，无法使我的nav / div的高度偏移

1 个答案: