Untitled

Getting Uncaught TypeError: Cannot read property 'left' of null in js

navigation arrow starts

var $el, leftPos, newWidth,

    $mainNav = $("#nav");

 

$mainNav.append("<li id='magic-line'></li>");

var $magicLine = $("#magic-line");

 

$magicLine

    .width($(".current_page_item").width())

    .css("left", $(".current_page_item a").position().left)

    .data("origLeft", $magicLine.position().left)

    .data("origWidth", $magicLine.width());

 

//scroll arrow

 

function update_location(){

    $el = $('#nav').children('li.current');

    leftPos = $el.position().left;

    newWidth = $el.width();

    $('#nav li:nth-child(4) a').addClass('button-style');

    if(window.top.scrollY == 0)

    {

        setTimeout(function(){

        $magicLine.stop().animate({

            left: 8,

            width: 355

        });},1000);

        $('#nav li:nth-child(4) a').removeClass('button-style');

 

    }

    else

    {

        setTimeout(function(){

        $magicLine.stop().animate({

            left: leftPos,

            width: newWidth

        });},1000);

    }

}

 

$('#magic-line').css('left', '-15px', 'width','411px');

$(window).scroll(function(){

    update_location();

});

 

    <div class="navbar-fixed-top navbar" >

    <div class="navbar-inner">

        <div class="container">

            <ul class="nav nav-pills pull-right" id="nav">

                <li class="current_page_item" style="width: 355px;"><a href="#home" class="logo" style="display:block; width: 355px;"><img src="images/logo.jpg" class="current_page_item" width="355" alt="" /></a></li>

                <li><a href="#vision">VISION</a></li>

                <li><a href="#services">SCHOOLS</a></li>

                <li><a href="#apply">REQUEST AN EVALUATION</a></li>

                <li><a href="#how-it-works">HOW IT WORKS</a></li>

                <li><a href="#contact-us">CONTACT US</a></li>

            </ul>

        </div>

    </div>

</div>

       

$el = $('#nav').children('li.current');