delosait

- var element = document.getElementById('portfolio-content-nav') + window.pageYOffset + 'px';
+ var element = document.getElementById('portfolio-content-nav');
window.addEventListener('scroll', function () {
-   if (element > 100) {
+   if (window.scrollY > 100) {
        element.classList.add("shadow");
    } else {
        element.classList.remove("shadow");
    }
});

Все слои которые находятся внутри Фрейма, автоматически к нему привязываются. Внутри Фрейма, для каждого объекта можно задать позицию, в которой он будет находится при изменении масштаба. Чтобы при деформации Фрейма, объекты внутри не меняли свои размеры, нужно задать слою или группе слоев позицию.



На картинке задана позицию Left - Top, это означает что объект всегда будет привязан к верхнему левому углу.

.menu-list li {
  flex-grow: 1;
}

Вместо .pipe(sass()) надо .pipe(sass().on('error', sass.logError))

gulp.task('sass', function () {
    return gulp.src('scss/style.scss')
        .......
        .pipe(sass().on('error', sass.logError))
        .......
});