Не работает простой код jQuery в IE 8.

[Евгений76]

Привет!
На своем сайте я использую относительную единицу измерения CSS —
vw. Как заставить ее понимать старые браузеры, я нашел способ, но только не IE 8. Для него у меня подключена jQuery v1.12.4, так как в версии v2 отказались от поддержки IE 8.
Сразу говорю, jQuery не изучал совсем, так как я поддерживаю всего один свой сайт. Имею такой код:

$(document).ready(function() {
    var css_sh = $("body").innerWidth() * 0.16; /* Это 16 процентов */
    css_sh = Math.round(css_sh);
    $('#sh').css({height: css_sh + 'px'});
});

В IE 8, элементу #sh присваивается такое свойство:

<div id="sh" style="height: 5496px;">

В других браузерах все норм.
Различные полифилы и другие костыли работают плохо, а некоторые вообще не работают.
Посмотреть проблемную страницу можно здесь. Для мобильных устройств шапка еще не доделана, не пугайтесь.
А на главную страницу не заходите — там мой старый дизайн.

Кстати, если мне поможет кто-то из вас с этой проблемкой по сайту, тому полагается скидка на наши услуги. А тому, кто "не немножко", по глобальнее поможет и другие косяки устранить —
крупная скидка. (Это будет моя благодарность за помощь.)

[Nexus]

Попробуйте так:

var css_sh = $(window).width() * 0.16; /* Это 16 процентов */

Upd. раньше как-то все без vw/vh справлялись с версткой, может у вас самой верстке проблема, раз она требует использования новых единиц измерения?

[j0hnik]

0.15 процентов в рунете статистика за январь ie8 и ниже

[j0hnik]

и чем дольше мы стараемся поддерживать это старье, тем дольше люди на этом старье не будут обновляться.

[Евгений76]

Nexus,
Заработало! Спасибо Вам огромное! Теперь можете пользоваться скидкой, когда захотите)
Ну а в моей верстке, да, проблема. Я ведь не профессионал, создал только этот сайт.
А можно еще спросить, как упростить этот код?

$(document).ready(function() {
	$(window).scroll (function () {
		if ($(this).scrollTop () > 50) {
			$('body').addClass('bg-size');
		} else {
			$('body').removeClass('bg-size');
		}
	});
	$('#vk_logo, #yt_logo').hover(function() {
		$(this).next().show(0);
		$(this).next().animate({opacity: '1'}, 400);
	}, 
	function() {
		$(this).next().animate({opacity: '0'}, 400);
		$(this).next().hide(400);
	});
});

.bg-size {background-size:120% auto;transition:all 2s ease-out;}

Это сделано для того, чтобы, когда делаешь первый скролл страницы, фон увеличивается плавно.

[Евгений76]

j0hnik,
На моем сайте статистика 0.5% только одного IE 8.

[j0hnik]

Nexus,
А можно еще спросить, как упростить этот код?

можно убрать эту часть

$('#vk_logo, #yt_logo').hover(function() {
		$(this).next().show(0);
		$(this).next().animate({opacity: '1'}, 400);
	}, 
	function() {
		$(this).next().animate({opacity: '0'}, 400);
		$(this).next().hide(400);
	})

;

и сделать это с помощью CSS

[Nexus]

Теперь можете пользоваться скидкой, когда захотите

Ага, спасибо.

как упростить этот код

$(document).ready(function() {
    $(window).scroll(function() {
        var bool = $(this).scrollTop() > 50,
            $body = $('body'),
            c = 'bg-size';

        if (bool && !$body.hasClass(c)) {
            $body.addClass(c);
        } else if (!bool && $body.hasClass(c)) {
            $body.removeClass(c);
        }
    });

    $('#vk_logo, #yt_logo').hover(function() {
            $(this).next().fadeIn(400);
        },
        function() {
            $(this).next().fadeOut(400);
        });
});

PS. с j0hnik полностью согласен. Пол процента - не то кол-во, ради которого стоит костыли лепить.

[Nexus]

можно убрать эту часть ... и сделать это с помощью CSS

Разве при изменении свойства display transition opacity не отвалится?
https://jsfiddle.net/bohg54gc/

[Евгений76]

Nexus,
Благодаря совету j0hnik, я сделал это сейчас на CSS, с плавным появлением. Не знаю, почему это я не додумался. Вместо display:block; использовал visibility:hidden;
А для плавности transition:all 0.4s ease-out;