草庐IT

jquery - HTML Bootstrap 3 不向 UL LI 添加事件类

coder 2023-08-05 原文

我正在尝试使用 scroll-spy 将一个事件类添加到单页滚动和粘性导航上的 ul li，由于某些未知原因，我无法在我的元素中使用这项工作。 下面是我的菜单布局:

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top my-nav" role="navigation">
    <div class="container_full height">
        <div class="navbar-header page-scroll height">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="logo-holder">
            <img class="" src="img/logo-p.png"/>
            <span>
                <a class="page-scroll" href="#home-page">xxxxxx</a>
                <i>xxxxxxx</i>
            </span>
            </div> 
        </div>  
        <div class="collapse navbar-collapse navbar-ex1-collapse height">
            <ul class="nav navbar-nav height">
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#home-page">item1</a>
                </li>
                <li>
                    <a class="page-scroll" href="#item2">item2</a>
                </li>                   
                <li>
                    <a class="page-scroll" href="#item3">item3</a>
                </li>

                <li>
                    <a class="page-scroll" href="#item4">item4</a>
                </li>
            </ul>
            </div>
        </div>
    </div>
</nav>
<div class="container_full" id="site">
<section class="parallax">
<!-- HOME PAGE DISPLAY -->  
    <div id="home-page" class="home-g height-650">
        <div class="parallax-layer parallax-back height-650" >
            <div class="home">
            </div>
            //many divs css parallax--

导航js文件如下:

 $('.parallax').scroll(function() {

if ($('.parallax').scrollTop() > 100) { 
    $(".navbar-fixed-top").addClass("top-nav-collapse");
    $(".my-nav").addClass("nav-resize");



} else {

    $(".navbar-fixed-top").removeClass("top-nav-collapse");
    $(".my-nav").removeClass("nav-resize");
    $(".moveLogo").removeClass("moveLogo-resize");
}
});


$(function() {
$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    var position =  $($anchor.attr('href')).offset().top + $('.parallax').scrollTop() ;

    $('html,body,.parallax').stop().animate({
        scrollTop: position
    }, 1500, 'easeInOutExpo');

    event.preventDefault();
   });
});

如果我在没有视差 div 等的情况下使用上述方法，这将没有问题，但目前 li 类始终在 last li 元素 向下滚动页面时。

green = 父容器“Blue”内的可滚动内容，绿色 div 用于目标 id。

 .blue{
    height:100%;
    width:100%;
    overflow:hidden;

 }

 .green // Has many divs

我尝试了明显的目标是绿色 > div，但它似乎不起作用。

最佳答案

您的代码没有提供足够的功能，因此我添加了一系列 1000 像素高且具有不同背景颜色的 div - 所有这些都与您的导航菜单中的 ID 相对应 - 滚动 spy 正在工作。也许您只是没有足够的内容来滚动或未正确实现 ID？

请注意，我还使用了最新版本的 Bootstrap 和 jQuery...

Check the fiddle 

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
            <script src="//oss.maxcdn.com/libs/html5shiv/r29/html5.min.js"></script>
            <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>


<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top my-nav" role="navigation">
    <div class="container_full height">
        <div class="navbar-header page-scroll height">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="logo-holder">

            <span>
                <a class="page-scroll" href="#home-page">xxxxxx</a>
                <i>xxxxxxx</i>
            </span>
            </div> 
        </div>  
        <div class="collapse navbar-collapse navbar-ex1-collapse height">
            <ul class="nav navbar-nav height">
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#home-page">item1</a>
                </li>
                <li>
                    <a class="page-scroll" href="#item2">item2</a>
                </li>                   
                <li>
                    <a class="page-scroll" href="#item3">item3</a>
                </li>

                <li>
                    <a class="page-scroll" href="#item4">item4</a>
                </li>
            </ul>
            </div>
        </div>
    </div>
</nav>
<div class="container_full" id="site">
<section class="parallax">
<!-- HOME PAGE DISPLAY -->  
    <div id="home-page" class="home-g height-650">
        <div class="parallax-layer parallax-back height-650" >
            <div class="home">
            </div>
            <div style="height:1000px; background:pink"></div>
        </div>
    </div>

    <div id="item2" class="home-g height-650">
        <div class="parallax-layer parallax-back height-650" >
            <div class="home">
            </div>
            <div style="height:1000px; background:red"></div>
        </div>
    </div>

    <div id="item3" class="home-g height-650">
        <div class="parallax-layer parallax-back height-650" >
            <div class="home">
            </div>
            <div style="height:1000px; background:green"></div>
        </div>
    </div>


        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>

</script>
    </body>
</html>

关于jquery - HTML Bootstrap 3 不向 UL LI 添加事件类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32173454/

Bootstrapjquery34gtlthtmlcsstwitter-bootstrap

有关jquery - HTML Bootstrap 3 不向 UL LI 添加事件类的更多相关文章

  1. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗？ - 2

    当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/

  2. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它

  3. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  4. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  5. ruby - 可以通过多少种方法将方法添加到 ruby​​ 对象？ - 2

    当谈到运行时自省(introspection)和动态代码生成时，我认为ruby​​没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby​​的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资

  6. ruby - 如何在 Ruby 中向现有方法定义添加语句 - 2

    我注意到类定义，如果我打开classMyClass，并在不覆盖的情况下添加一些东西我仍然得到了之前定义的原始方法。添加的新语句扩充了现有语句。但是对于方法定义，我仍然想要与类定义相同的行为，但是当我打开defmy_method时似乎,def中的现有语句和end被覆盖了，我需要重写一遍。那么有什么方法可以使方法定义的行为与定义相同，类似于super，但不一定是子类？ 最佳答案 我想您正在寻找alias_method:classAalias_method:old_func,:funcdeffuncold_func#similartoca

  7. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  8. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

  9. ruby - 我如何添加二进制数据来遏制 POST - 2

    我正在尝试使用Curbgem执行以下POST以解析云curl-XPOST\-H"X-Parse-Application-Id:PARSE_APP_ID"\-H"X-Parse-REST-API-Key:PARSE_API_KEY"\-H"Content-Type:image/jpeg"\--data-binary'@myPicture.jpg'\https://api.parse.com/1/files/pic.jpg用这个:curl=Curl::Easy.new("https://api.parse.com/1/files/lion.jpg")curl.multipart_form_

  10. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

随机推荐