使用.prepend if语句添加文本

Question

我正在用jQuery制作一个响应式导航栏：

HTML：

<div class="head-wrap">
     <h1>Header Content</h1>

    <ul class="horiz-nav">
        <li><a href="#">Nav bar link</a>
        </li>
        <li><a href="#">Nav bar link</a>
        </li>
        <li><a href="#">Nav bar link</a>
        </li>
    </ul>
</div>

联署材料：

$(function(){
    $(document).scroll(function(){
        if($(this).scrollTop() > 90){
            var header = $(".horiz-nav");
            $(".horiz-nav").stop().css({'position' : 'fixed'}).animate({ 'top' : '0px'}, 0);
            header.prepend("<li>Header Content</li>");
        } else {
            $(".horiz-nav").stop().css('position', 'absolute').stop().animate({'top' : '38px'}, 100);
        }
    });

这主要是因为它应该:它使导航条开关位置时，用户滚动。但是我想做的是，当页面被滚动时，使导航栏上方的h1成为导航条的一部分。然而，随着页面的滚动，这段代码生成了几十个h1副本(虽然更小)。如何在其他导航栏项之前只显示一个？小提琴

Answer 1

只有在元素不存在的情况下才进行准备

if(!$('#element').length) {...}

$(function(){
    $(document).scroll(function(){
        if($(this).scrollTop() > 90){
            var header = $(".horiz-nav");
            $(".horiz-nav").stop().css({'position' : 'fixed'}).animate({ 'top' : '0px'}, 0);
            if(!$('#added').length) {
              header.prepend("<li id='added'>Header Content</li>");
            }
        } else {
            $(".horiz-nav").stop().css('position', 'absolute').stop().animate({'top' : '38px'}, 100);
        }
    });

Answer 2

您可以在您的if中使用if，在您的其他地方使用header.find('h1').prependTo('.head-wrap');。他们都只会成功一次作为第二次，这个元素将不再存在。

$(document).scroll(function () {
    var header = $(".horiz-nav");
    if ($(this).scrollTop() > 90) {

        $(".horiz-nav").stop().css({
            'position': 'fixed'
        }).animate({
            'top': '0px'
        }, 0);
        $('.head-wrap > h1').prependTo(header);
    } else {
        $(".horiz-nav").stop().css('position', 'absolute').stop().animate({
            'top': '38px'
        }, 100);
        header.find('h1').prependTo('.head-wrap');
    }
});

请参阅小提琴