add dot for scrolling effect




================html===============

add "scrollable-section" class to those section where you want scrolling effect.
and wrap that div with " <div class="nameSec" data="About Us">{{ html }}</div> "

===================css================

.bullets-container {
   position: fixed;
   z-index: 52;
   top: 50%;
   right: 15px;
   padding: 0 10px 0 0;
   -webkit-transition: opacity .3s 0s linear;
   -moz-transition: opacity .3s 0s linear;
   -o-transition: opacity .3s 0s linear;
   transition: opacity .3s 0s linear;
   -webkit-transform: translate3d(0,-50%,0);
   -moz-transform: translate3d(0,-50%,0);
   -ms-transform: translate3d(0,-50%,0);
   -o-transform: translate3d(0,-50%,0);
   transform: translate3d(0,-50%,0);
   height: auto;
   display: block;
}
.bullets-container ul li {
   margin: 0;
}
.bullets-container ul.section-bullets li a {
   display: block;
   margin: 0;
   padding: 10px 0 10px 15px;
   cursor: pointer;
   outline: 0;
   border: none;
   border-radius: 0;
   width: auto;
   height: auto;
   -webkit-box-sizing: unset;
   box-sizing: unset;
   background: transparent;
   color: #000;
}
.bullets-container ul li a:before {
   content: '';
   width: 10px;
   height: 10px;
   display: block;
   text-decoration: none;
   -webkit-border-radius: 50%;
   border-radius: 50%;
   -webkit-transition: background-color 0.1s linear, border-color 0.1s linear;
   -moz-transition: background-color 0.1s linear, border-color 0.1s linear;
   -o-transition: background-color 0.1s linear, border-color 0.1s linear;
   transition: background-color 0.1s linear, border-color 0.1s linear;
   background-color: #000;
}
.bullets-container ul li.active a:before {
   background-color: transparent;
   border: solid 2px #000;
   width: 8px;
   height: 8px;
   margin-left: -1px;
}
.bullets-container ul li a span {
   position: absolute;
   right: 10px;
   opacity: 0;
   font-size: 13px;
   text-transform: uppercase;
   white-space: nowrap;
   font-family: "Open Sans";
   letter-spacing: 3px;
   font-weight: 700;
   font-style: normal;
   text-decoration: none;
   margin-top: -20.5px;
   padding: 0 0 5px 0;
   -webkit-transition: all .3s cubic-bezier(.23,1,.32,1);
   -moz-transition: all .3s cubic-bezier(.23,1,.32,1);
   -ms-transition: all .3s cubic-bezier(.23,1,.32,1);
   -o-transition: all .3s cubic-bezier(.23,1,.32,1);
   transition: all .3s cubic-bezier(.23,1,.32,1);
   line-height: 32px;
   visibility: hidden;
   color: #000;
}
.bullets-container ul li a:hover span {
   right: 20px;
   opacity: 1;
   z-index: 51;
   padding-right: 15px;
   visibility: visible;
}
.bullets-container.white-bullets ul li a:before {
   background-color: #fff;
}
.bullets-container.white-bullets ul li.active a:before {
   background-color: transparent;
   border: solid 2px #fff;
}
.bullets-container.white-bullets ul li a span {
  color: #fff;
}

========================js=====================

<script type="text/javascript" src="materialize.min.js"></script>
<script>

(function ($) {
  $.fn.sectionScroll = function (options) {
    var $parent_elem,
        $window,
        $section_elem,
        $section_number,
        $bullets,
        $sectionInView,
        totalSections,
        $sec_id,
        $bullets_class,
        $default_sections_class,
        $default_bullets_class,
        // Default options.
        settings = $.extend({
          bulletsClass: 'section-bullets',
          sectionsClass: 'scrollable-section',
          scrollDuration: 1000,
          titles: true,
          topOffset: 0,
          easing: ''
        }, options);
    $parent_elem = this;
    $section_number = 1;
    $window = $(window);
    $section_elem = settings.sectionsClass;
    $bullets_class = settings.bulletsClass;
    $bullets = '<div class="bullets-container"><ul class="'+ $bullets_class +'"></ul></div>';
    $parent_elem.prepend($bullets);
    totalSections = 0;
    $sec_id = 0;
    $('.' + $section_elem).each(function () {
//       if (!($(this)).data('section-title')) {
//         $(this).attr('data-section-title', '');
//       }
      $(this).attr('id', 'scrollto-section-' + $section_number);
      $sec_id++;
      $('.' + $bullets_class).append('<li><a title="' + $(this).data('section-title') + '" href="#scrollto-section-' + $sec_id + '"><span>' + $(this).data('section-title') + '</span></a></li>');
      $section_number++;
      totalSections++;
    });
    if (!(settings.titles)) {
      $('.' + $bullets_class).find('span').remove();
    }
    var lastId,
        $bulletsMenuHeight = $('.' + $bullets_class).outerHeight() + 15,
        menuItems = $('.' + $bullets_class).find("li"),
        scrollItems = $(menuItems).map(function () {
          var item = $($(this).find('a').attr("href"));
          if ($(item).length) {
            return item;
          }
        });
    menuItems.click(function (e) {
      var href = $(this).find('a').attr("href"),
          offsetTop = href === "#" ? 0 : $(href).offset().top;
      $('html, body').stop().animate({
        scrollTop: offsetTop - settings.topOffset
      }, settings.scrollDuration, settings.easing, function(){
        $parent_elem.trigger('scrolled-to-section').stop();
      });
      e.preventDefault();
    });
    $(document).ready(function () {
      $('html, body').stop().animate({
        scrollTop: 1
      }, 0);
      var fromTop = $(this).scrollTop();
      var cur = scrollItems.map(function () {
        if ($(this).offset().top < fromTop) return this;
      });
      cur = cur[cur.length - 1];
      var id = cur && cur.length ? cur[0].id : "";
      $.fn.sectionScroll.activeSection = cur;
      if (lastId !== id) {
        $('.' + $section_elem).removeClass('active-section');
        lastId = id;
        $parent_elem.trigger('section-reached');
        setTimeout(function () {
          $(cur).addClass('active-section'); 
          menuItems
            .removeClass("active")
            .end()
            .find('a').filter("[href=#" + id + "]")
            .parent()
            .addClass("active");
        });
      }
    })
    $(window).scroll(function () {
      var fromTop = $(this).scrollTop() + 117;
      var cur = scrollItems.map(function () {
        if ($(this).offset().top < fromTop) {
          return this;
        }
      });
      cur = cur[cur.length - 1];
      var id = cur && cur.length ? cur[0].id : "";
      $.fn.sectionScroll.activeSection = cur;
      $activeSection = cur;
      if (lastId !== id) {
        $('.' + $section_elem).removeClass('active-section');
        lastId = id;
        $parent_elem.trigger('section-reached');
        setTimeout(function () {
          $(cur).addClass('active-section');
          menuItems
            .removeClass("active")
            .end()
            .find('a').filter("[href=#" + id + "]")
            .parent()
            .addClass("active");
        });
      }
    });
    return $parent_elem;
  };
}(jQuery));
$(document).ready(function () {
  $('body').sectionScroll({
    easing: 'easeInOutQuart',
    scrollDuration: 1200
  });
//   $('body').on('section-reached', function() {
//     var section_title = $('body').sectionScroll.activeSection.data('section-title');
//     Materialize.toast('In view: ' + section_title, 1000);
//   })
})


//===========

$(window).on("load resize scroll", function(){

  $('.themeColor').each(function(){
    var scrollTop = $('.bullets-container').offset().top + ( $('.bullets-container').outerHeight() / 2 );
    var currentStartPos = $(this).offset().top;
    var currentEndPos = $(this).outerHeight() + currentStartPos;
    if ( scrollTop > currentStartPos ){
      if ( scrollTop < currentEndPos ){
      $(this).addClass('over');
      }
      else{
      $(this).removeClass('over');
      }
    }
    else{
    $(this).removeClass('over');
    }
  });

  if ( $('.themeColor.over').length > 0 ){
  $('.bullets-container').addClass("white-bullets");
  }
  else{
  $('.bullets-container').removeClass("white-bullets");
  }

});

$(window).load(function(){
  setTimeout(function(){
    if ( $('.nameSec').length > 0 ){
      $('.nameSec').each(function(i){
        var thaisVal = $(this).attr('data');
        $('.bullets-container ul li').each(function(j){
          if ( i == j ){
            $(this).find('span').text( thaisVal );
          }

        });
      });
    }
  },1000);
});

</script>

========================================================

Download Plugin

Download Here

Comments

Post a Comment

Popular posts from this blog

Pagination of multiple recent post blog

<div class="blog-section">   <div class="blog-listing-wrapper cell-wrapper">     <div class="post-listing clearfix">       {% set blog_one_posts = blog_recent_posts('6126215542', 200) %} <!-- sets a variable for a the 5 most recent posts of my default COS blog -->       {% set blog_two_posts = blog_recent_posts('6126300566', 200) %}  <!-- sets a variable for a the 5 most recent posts of my blog id 47082700. You can find the blog id in the URL of the blog dashboard for a particular blog-->       {% set blog_three_posts = blog_recent_posts('6130453958', 200) %}       {% set blog_four_posts = blog_recent_posts('6131348719', 200) %}       {% set all_posts = (blog_one_posts + blog_two_posts + blog_three_posts + blog_four_posts) | sort(true, false, 'publish_date')  %} <!-- combines the two variables into a single variable and sorts them by publish date. ...
Read more

Posts by category

Image
ADD " module.blog" as a field in custom module <h2>Posts by category</h2> {% set topics_list = blog_topics(module.blog, 250) %} {% if topics_list %} <ul> {% for topic in topics_list %}   <li><strong>Category: </strong> <a href="{{ blog_tag_url(module.blog, topic.slug) }}">{{ topic.name }}</a></li> {% set topic_posts = blog_recent_topic_posts( module.blog , topic.slug , 10) %}   {% for topic_post in topic_posts %}     {% if topic_post.absolute_url != request.full_url %}       <div class="post-title"><a href="{{topic_post.absolute_url}}">{{ topic_post.name }}</a></div>     {% endif %}   {% endfor %} {% endfor %} </ul> {% endif %}
Read more

Js Code

Javascript Codes Wrap Text Node function wrapSpan(node, index) { if (node.nodeName === '#text') { var text = node.textContent; var s = document.createElement('span'); s.textContent = text; node.parentElement.insertBefore(s, node.parentElement.childNodes[index]); node.remove(); } else { var length = node.childNodes.length; // childNodes is a collection, not an array. :-/ for (var i = 0; i Use this for Add Class on menu links using Javascript (function(){ var el = document.querySelectorAll('.custom-menu-primary a') el.forEach(function(e){ e.classList = e.textContent.toLowerCase().replace(/[^a-zA-Z0-9\.-]+/g,""); }) })(); Use this for Add Class active class on categories (function(){ var value1 = window.location.href.substring(window.location.href.lastIndexOf('/') + 1); docume...
Read more