<div id="section-four"  title="bestitem"  ></div>

<div id="section-five"  title="new arrivals"  ></div>

쇼핑몰에서 클릭시 해당 섹션으로 이동하고 스크롤시 해당 섹션 타이틀이 활성화 되는 소스입니다.

다른 부분은 정상 작동하는데 위 소스에서 title 부분 문자에 공백을 넣으면 해당 부분이 활성화 되지 않는 문제가 있네요.

스크립에서 공백처리를 해줘야 할  것 같은데요 구글링 6시간 하다가 도저히 안되어서 회원님들의 도움 구해봅니다.

아래가 스크립트 소스입니다.

------------------------------------

 jQuery(function($) {

  var html = $('html');
  var viewport = $(window);
  var viewportHeight = viewport.height();

  var scrollMenu = $('#section-menu');
  var timeout = null;

  function menuFreeze() {
    if (timeout !== null) {
      scrollMenu.removeClass('freeze');
      clearTimeout(timeout);
    }

    timeout = setTimeout(function() {
      scrollMenu.addClass('freeze');
    }, 2000);
  }
  scrollMenu.mouseover(menuFreeze);

  /* ==========================================================================
       Build the Scroll Menu based on Sections .scroll-item
       ========================================================================== */

  var sectionsHeight = {},
    viewportheight, i = 0;
  var scrollItem = $('.scroll-item');
  var bannerHeight;

  function sectionListen() {
    viewportHeight = viewport.height();
    bannerHeight = (viewportHeight);
    $('.section').addClass('resize');
    scrollItem.each(function() {
      sectionsHeight[this.title] = $(this).offset().top;
    });
  }
  sectionListen();
  viewport.resize(sectionListen);
  viewport.bind('orientationchange', function() {
    sectionListen();
  });

  var count = 0;

  scrollItem.each(function() {
    var anchor = $(this).attr('id');
    var title = $(this).attr('title');
    count++;
    $('#section-menu ul').append('<li><a id="nav_' + title + '" href="#' + anchor + '"><span>' + count + '</span> ' + title + '</a></li>');
  });

  function menuListen() {
    var pos = $(this).scrollTop();
    pos = pos + viewportHeight * 1.75;
    for (i in sectionsHeight) {
      if (sectionsHeight[i] < pos) {
        $('#section-menu a').removeClass('active');
        $('#section-menu a#nav_' + i).addClass('active');;
        var newHash = '#' + $('.scroll-item[title="' + i + '"]').attr('id');
        if (history.pushState) {
          history.pushState(null, null, newHash);
        } else {
          location.hash = newHash;
        }
      } else {
        $('#section-menu a#nav_' + i).removeClass('active');
        if (pos < viewportHeight - 72) {
          history.pushState(null, null, ' ');
        }
      }
    }
  }
  scrollMenu.css('margin-top', scrollMenu.height() / 2 * -1);

  /* ==========================================================================
       Smooth Scroll for Anchor Links and URL refresh
       ========================================================================== */

  scrollMenu.find('a').click(function() {
    var href = $.attr(this, 'href');
    $('html').animate({
      scrollTop: $(href).offset().top
    }, 500, function() {
      window.location.hash = href;
    });
    return false;
  });

  /* ==========================================================================
       Fire functions on Scroll Event
       ========================================================================== */

  function scrollHandler() {
    menuListen();
    menuFreeze();
  }
  scrollHandler();
  viewport.on('scroll', function() {
    scrollHandler();
    //            window.requestAnimationFrame(scrollHandler);
  });
});