При написании скриптов, взаимодействующих с интерфейсом, лучше не ждать по тайм-ауту, а ждать чего то конкретного. Если после нажатия на $('.items') с сервера должны подтянутся контакты, то нужно ждать появления на странице контактов, а не 5 сек. Короче, надо ждать чего-то конкретного.
Вообще эталонной реализацией material design от гугл можно назвать Polymer. Вот пример кнопки. Проблема только в том что полимер основан на базе самых последних спецификаций - html imports, shadow dom, templates, custom elements и прочее. Но полифиллы вроде автоматически подключаются, если старый браузер.
Можно, есть компилятор Ruby в JavaScript. Такого рода компиляторы дают возможность быстрого старта за счет использования уже знакомого вам языка, но у всего есть своя цена - вы получите неудобства с процессе разработки: дебаг с помощью соурс-мап, дополнительная стадия компиляции во время сборки проекта, не очень большое коммьюнити у подобного рода компиляторов, баги в процессе перевода в JS и т.д. Это компромисс между нежеланием учить JS и желанием терпеть такие неудобства.
Все такие решения строяться на одном единственном принципе: проставление стиля position: fixed на элементе, который нужно зафризить. Работает вплоть до IE8 (если использовать DOCTYPE). Есть полно плагингов, 10+ jQuery Sticky Scroll Plugins
Если вы "div записываете в переменную", то в переменной лежит HTMLDivElement, а не текст. Это раз. А текст берётся из него с помощью .innerText (см. ссылку в комменте выше).
Ещё можно через getComputedStyle() - с помощью этого метода можно получить даже те стили, которые не были установлены через JS (только на это потребуется больше времени).