JQuery - Conflitto menu a scomparsa e pagina scorrevole

[AltF4]

Ciao a tutti, sto lavorando da alcuni giorni ad un sito internet che sia costituito da un unica pagina, dove i contenuti vengono visualizzati attraverso uno scroll verticale.

Ho utilizzato lo script ScrollIT che utilizza jQuery.

Il mio problema è che dovrei inserire un menu a scomparsa, che quando ci si va sopra col mouse compare dal basso.

Quando inserisco questo script non mi funziona più lo scroll.

<script>
$('#nav-container a').stop().animate({'marginBottom':'-50px'},1000);
    $('#nav-container > li').hover(
        function () {
            $('a',$(this)).stop().animate({'marginBottom':'-7px'},200);
        },
        function () {
            $('a',$(this)).stop().animate({'marginBottom':'-50px'},200);
        }
    );
</script>

Dovrebbe trattarsi di un conflitto ed ho cercato una soluzione, ma applicando jQuery.NoConflict continua a non funzionare, ecco cosa ho modificato:

<script>
var jq = jQuery.noConflict();
jq( document ).ready(function( ) {
  // Code that uses jQuery's $ can follow here.
jq(function() {
 jq('#navigation a').stop().animate({'marginBottom':'-30px'},1000);
 jq('#navigation > li').hover(
  function () {
   jq('a',jq(this)).stop().animate({'marginBottom':'-5px'},200);
  },
  function () {
   jq('a',jq(this)).stop().animate({'marginBottom':'-30px'},200);
  }
 );
});
});
// Code that uses other library's $ can follow here.
</script>

Sono giorni che ci lavoro, ma non so proprio più dove sbattere la testa

Qualcuno può aiutarmi?

Grazie in anticipo!

[AltF4]

Ho provato ad approfondire e non mi è chiaro se il conflitto esiste o meno.

Dopotutto si tratta di entrambi script che utilizzano jQuery, dovrebbero coesistere senza problemi.

Cosa ho sbagliato?

Questo è lo script per lo scroll della pagina:

(function($) {
    'use strict';
    var pluginName = 'ScrollIt',
        pluginVersion = '1.0.3';
    /*
     * OPTIONS
     */
    var defaults = {
        upKey: 38,
        downKey: 40,
        easing: 'linear',
        scrollTime: 600,
        activeClass: 'active',
        onPageChange: null,
        topOffset : 0
    };
    $.scrollIt = function(options) {
        /*
         * DECLARATIONS
         */
        var settings = $.extend(defaults, options),
            active = 0,
            lastIndex = $('[data-scroll-index]:last').attr('data-scroll-index');
        /*
         * METHODS
         */
        /**
         * navigate
         *
         * sets up navigation animation
         */
        var navigate = function(ndx) {
            if(ndx < 0 || ndx > lastIndex) return;
            var targetTop = $('[data-scroll-index=' + ndx + ']').offset().top + settings.topOffset + 1;
            $('html,body').animate({
                scrollTop: targetTop,
                easing: settings.easing
            }, settings.scrollTime);
        };
        /**
         * doScroll
         *
         * runs navigation() when criteria are met
         */
        var doScroll = function (e) {
            var target = $(e.target).attr('data-scroll-nav') ||
            $(e.target).attr('data-scroll-goto');
            navigate(parseInt(target));
        };
        /**
         * keyNavigation
         *
         * sets up keyboard navigation behavior
         */
        var keyNavigation = function (e) {
            var key = e.which;
            if(key == settings.upKey && active > 0) {
                navigate(parseInt(active) - 1);
                return false;
            } else if(key == settings.downKey && active < lastIndex) {
                navigate(parseInt(active) + 1);
                return false;
            }
            return true;
        };
        /**
         * updateActive
         *
         * sets the currently active item
         */
        var updateActive = function(ndx) {
            if(settings.onPageChange && ndx && (active != ndx)) settings.onPageChange(ndx);
            active = ndx;
            $('[data-scroll-nav]').removeClass(settings.activeClass);
            $('[data-scroll-nav=' + ndx + ']').addClass(settings.activeClass);
        };
        /**
         * watchActive
         *
         * watches currently active item and updates accordingly
         */
        var watchActive = function() {
            var winTop = $(window).scrollTop();
            var visible = $('[data-scroll-index]').filter(function(ndx, div) {
                return winTop >= $(div).offset().top + settings.topOffset &&
                winTop < $(div).offset().top + (settings.topOffset) + $(div).outerHeight()
            });
            var newActive = visible.first().attr('data-scroll-index');
            updateActive(newActive);
        };
        /*
         * runs methods
         */
        $(window).on('scroll',watchActive).on('scroll');
        $(window).on('keydown', keyNavigation);
        $('body').on('click','[data-scroll-nav], [data-scroll-goto]', function(e){
            e.preventDefault();
            doScroll(e);
        });
    };
}(jQuery));

[cavicchiandrea]

Metti la pagina demo online (tuosito.xxxx/tuapaginademo.xxxx)

[AltF4]

Metti la pagina demo online (tuosito.xxxx/tuapaginademo.xxxx)

Ti ringrazio, sai dirmi dove posso "appoggiare" la demo?

[Nobody33]

QUI ad esempio

[AltF4]

QUI ad esempio

Grazie! Chissà perché pensavo che Altervista non funzionasse più..

Ecco il link:

http://demoaltf4.altervista.org/test-menu.htm

[AltF4]

Non riesco proprio a venirne a capo, eppure si tratta di jQuery per entrambi gli script, dovrebbero riuscire a coesistere.