如何在jQuery中使用多个功能？

Question

I've added jQuery function that shows and hides navbar when scrolled. I also want to hide a div when the button 'start' is clicked. After i add new function none of them works longer. I have tried to add it to various places, but I still get no result at all. So how do I add multiple functions and make them to work?

Heres my code:

<script>
    // function that hides text on click 
    (function($) {
            $('#start').click(function() {
                    $('.lead').hide());
            });
    });
    // my original function that stopped working after i added new one
    (function($) {
        $(document).ready(function() {
            $(".masthead").css("background-color", "inherit");
            // fade in .navbar
            $(function() {
                $(window).scroll(function() {
                    // set distance user needs to scroll before we fadeIn navbar
                    if($(this).scrollTop() > 600) {
                        $('.masthead').fadeIn();
                        $(".masthead").css("background-color", "black");
                    } else if($(this).scrollTop() === 0) {
                        $('.masthead').fadeIn();
                        $(".masthead").css("background-color", "inherit");
                    } else {
                        $('.masthead').fadeOut();
                    }
                });
            });
        });
    }(jQuery));
</script>

Answer 1

I think the problem is in the closing tag of the function you're adding.

Try like this:

(function ($){
    $('#start').click(function(){
    $('.lead').hide();
  });
}(jQuery));
// my original function that stopped working after i added new one
(function ($) {

  $(document).ready(function(){

  $(".masthead").css("background-color","inherit");
  // fade in .navbar
  $(function () {
    $(window).scroll(function () {
            // set distance user needs to scroll before we fadeIn navbar
      if ($(this).scrollTop() > 600) {
        $('.masthead').fadeIn();
        $(".masthead").css("background-color","black");
      } else if($(this).scrollTop() === 0){
                $('.masthead').fadeIn();
                  $(".masthead").css("background-color","inherit");

      } else {
        $('.masthead').fadeOut();
      }
    });
  });
}); 
  }(jQuery));

Answer 2

Edit : Note that you have an extra closing bracket in the first function $('.lead').hide()); .

You can use the following. Both functions can be combined in to a single block. And you can use $(document).ready() directly. If there is a problem with name conflict for $ use jQuery.noConflict();

<script>
    $(document).ready(function() {
        $(".masthead").css("background-color", "inherit");
        // fade in .navbar
        $('#start').click(function() {
            $('.lead').hide();
        });
        $(window).scroll(function() {
            // set distance user needs to scroll before we fadeIn navbar
            if ($(this).scrollTop() > 600) {
                $('.masthead').fadeIn();
                $(".masthead").css("background-color", "black");
            } else if ($(this).scrollTop() === 0) {
                $('.masthead').fadeIn();
                $(".masthead").css("background-color", "inherit");
            } else {
                $('.masthead').fadeOut();
            }
        });
    });
</script>

Answer 3

At least, closing bracket is wrong here. $('.lead').hide()); Tip: always check developer console first. Have fun coding.