2016-03-21 3 views
0

Привет, ребята, я пытаюсь реализовать слайдер контента с помощью jquery. У меня есть div, который имеет много текста и некоторые разделы. и мы можем прокрутить вниз, чтобы просмотреть текст. Это выглядит примерно так: screenshot. Теперь, когда пользователь нажимает на один из вариантов перехода на опцию, пользователь должен быть доставлен в этот раздел (например, если пользователь нажимает на кооперативы, он должен взять его/ее в кооперативы), и если пользователь прокручивает текст, раздел, который находится в фокусе, следует подчеркнуть, в прыжке вариантслайдер содержимого с помощью jqyery

Пожалуйста, скажите мне, как я могу осуществить это

и если есть плагин, который может сделать это, пожалуйста, сообщите мне об этом, чтобы. Благодаря

+0

bootstrap имеет аналогичную реализацию http://getbootstrap.com/javascript/#affix – madalinivascu

ответ

0

Хорошее решение здесь может быть jquery.scrollTo - Легкий, кросс-браузер и настраиваемый анимированный скроллинг с JQuery

index.html

<!-- Include jQuery from somewhere, must use version 1.8 or above --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<!-- Include latest jquery.scrollTo, currently 2.1.0, can download from https://github.com/flesler/jquery.scrollTo/releases --> 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.scrollto/2.1.0/jquery.scrollTo.min.js"></script> 
<!-- Initialize the plugin, the contents of the script can be inlined here, of course --> 
<script type="text/javascript" src="js/init.js"></script> 

init.js

// You can avoid the document.ready if you put the script at the bottom of the page 
$(document).ready(function() { 
    // Bind to the click of all links with a #hash in the href 
    $('a[href^="#"]').click(function(e) { 
    // Prevent the jump and the #hash from appearing on the address bar 
    e.preventDefault(); 
    // Scroll the window, stop any previous animation, stop on user manual scroll 
    // Check https://github.com/flesler/jquery.scrollTo for more customizability 
    $(window).stop(true).scrollTo(this.hash, {duration:1000, interrupt:true}); 
    }); 
}); 

вы можете найти gist here

+0

это подчеркивает опцию, которая находится в фокусе, если мы просто прокручиваем вниз, не нажимаем на ссылку, чтобы перейти вниз – garden

+0

Для этого вы можете использовать http://davist11.github.io/jQuery-One-Page-Nav/ –

Смежные вопросы